/*** IMPORTS ***/

@import "reset.less";
@import "elements.less";
@import "functions.less";
@import "variables.less";

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {  
  min-height: 100%;
  font-size: 12px ;
  line-height: normal;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  background-color: #0171bd;
}


a {
	.transition (150ms);
	text-decoration: none;
	&:hover {
		text-decoration: none;
	}
}

h1 {font-size: 2em;}
h2 {font-size: 1.65em;}
h3 {font-size: 1.45em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1em;}

h1,h2,h3,h4,h5 {
	font-weight: bold;
	margin-bottom: 0.3em; 
}

.clr {
	clear: both;
}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float:right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

img.alignnone {
  margin: 5px 20px 20px 0;
}

img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%; /* Image does not overflow the content area */
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}


#header-container{
	background: white url("../images/clouds.jpg") right bottom no-repeat ;
	h1 {
		font-size: 1.3em;
	    display: inline-block;
	    padding: 3em 0 0 3em;
	    position: absolute;
	    color: steelblue;
	    text-shadow: 1px 1px 1px #a8b8c7;
	}
	.header{
		margin: 20px 0;
		height: 150px;
		position: relative;

		text-align: center;
	}

}

.container-container {
	background-color: white;
	padding-bottom: 50px; 
}
.content-container {
	margin-top: 15px;
	position: relative;
	ul {
		padding-left: 20px;
		margin-bottom: 10px;
	}
	p {
		margin: 0.5em 0;
		text-align: justify;
	}
}

.filters.left-col {
	a {
		display: block;
		width: 100%;
		margin-bottom: 10px;
	}
}

a.accueil-portail {

	display: block;
	height: 450px;
	text-align: center;
	text-transform: uppercase;
	padding: 20px;


	span:first-child:before{
		content: "infos";
		display: block;
		font-size: 0.6em;
		font-weight: 100;
		margin-top: 30px;
	}

	span {
		font-weight: 800;
		font-size: 2.5em;
		display: block;
		margin-bottom: 15px;
	}

	span + span {
		font-size: 1.15em;
		font-weight: 100;	
	}

	&.asso {
		
		background: @yellow url("../images/clouds_portail.png") center bottom no-repeat;

		span {
			color: white;
		}

		&:hover{
			background: transparent url("../images/clouds_portail_jaune.png") center bottom no-repeat;
	
			span {
				color: @yellow;	
			}
		}
	}

	&.patient{
		

		background: @blue url("../images/clouds_portail.png") center bottom no-repeat;

		span {
			color: white;
		}

		&:hover{
		
	background: transparent url("../images/clouds_portail_bleu.png") center bottom no-repeat;

			span {
				color: @blue;
			}
		}
	}
} 

#footer-container {
	background-color: #0171bd;
	padding: 20px 0;
	width: 100%;

	.content-container {

		color: white;
		font-size: 0.8em;
		font-weight: 100;


		h3 {
			font-weight: bold;
			padding: 5px 12px;
			margin: 0;
			text-align: center;
			text-transform: uppercase;

			a {
				text-decoration: none;
			}
		}

		a {
			color: white;
			border-bottom: dashed 1px white;

			&:hover {
				color: @yellow;
			}
		}


		&:not(.contacts){

			background-color: rgba(255,255,255,0.15);
			padding: 10px;

			h3 {
				background-color: #0171bd;
				margin: -10px;
				margin-bottom: 10px;
			}
		}
	}
}


.ariane {

	color: @black;
	font-weight: bold;
	font-size: 0.8em;

	a {
		&:hover{
			color: @blue;
			opacity: 1;
		}
	}
}

#loginout {

    position: absolute;
    right: 15px;
    top: 15px;


	a {

    	display: block;
		font-weight: bold;
		color: @cerise;
		line-height: 24px;
	}
}

ul#menu-principal {

	margin-top: 115px;
	text-align: right;

	list-style: none;

	li {
	
		display: inline-block;
		position: relative;

		.sub-menu{
			padding-top: 10px;
			position: absolute;
			opacity: 0;
			border-top: solid 5px transparent;
			.transition(150ms);
			pointer-events: none;
			
			top: 32px;
			right: 0;
			list-style: none;
			z-index: 1;
			margin: 0;
			padding: 0;
			li {
				width: 200px;
				a {
					width: 100%;
					margin: 0;
				}
			}
		}

		> a {
			padding: 7px;
			width: auto;
			display: inline-block;
			margin-top: 0;
			color: white;
			text-align: center;
			font-weight: bold;
			margin-left: 10px;
			background-color: @blue;
			&:hover {
				background-color: white !important;
			}
		}

		&:hover {
			.sub-menu {
				pointer-events: auto;
				opacity: 1;
			}
		}

		&.turquoise1 > a {background-color: @turquoise1;}
		&.turquoise2 > a {background-color: @turquoise2;}
		&.emeraude1 > a {background-color: @emeraude1;}
		&.emeraude2 > a {background-color: @emeraude2;}
		&.riviere1 > a {background-color: @riviere1;}
		&.riviere2 > a {background-color: @riviere2;}
		&.pourpre1 > a {background-color: @pourpre1;}
		&.pourpre2 > a {background-color: @pourpre2;}
		&.route1 > a {background-color: @route1;}
		&.route2 > a {background-color: @route2;}
		&.citron > a {background-color: @citron;}
		&.orange > a {background-color: @orange;}
		&.carotte > a {background-color: @carotte;}
		&.citrouille > a {background-color: @citrouille;}
		&.pamplemousse > a {background-color: @pamplemousse;}
		&.cerise > a {background-color: @cerise;}
		&.nuage > a {background-color: @nuage;}
		&.beton > a {background-color: @beton;}
		&.argent > a {background-color: @argent;}
		&.zinc > a {background-color: @zinc;}


		&.turquoise1 > a:hover{color: @turquoise1;}
		&.turquoise2 > a:hover{color: @turquoise2;}
		&.emeraude1 > a:hover{color: @emeraude1;}
		&.emeraude2 > a:hover{color: @emeraude2;}
		&.riviere1 > a:hover{color: @riviere1;}
		&.riviere2 > a:hover{color: @riviere2;}
		&.pourpre1 > a:hover{color: @pourpre1;}
		&.pourpre2 > a:hover{color: @pourpre2;}
		&.route1 > a:hover{color: @route1;}
		&.route2 > a:hover{color: @route2;}
		&.citron > a:hover{color: @citron;}
		&.orange > a:hover{color: @orange;}
		&.carotte > a:hover{color: @carotte;}
		&.citrouille > a:hover{color: @citrouille;}
		&.pamplemousse > a:hover{color: @pamplemousse;}
		&.cerise > a:hover {color: @cerise;}
		&.nuage > a:hover{color: @nuage;}
		&.beton > a:hover{color: @beton;}
		&.argent > a:hover{color: @argent;}
		&.zinc > a:hover{color: @zinc;}

	}
}



.menu-container {

	&.asso {
		background-color: @yellow;
		.menu > li > a:hover{ color: @blue; }  
		.menu > li .sub-menu li a:hover{ color: @blue; }
	}

	&.patient {
		background-color: @blue;
		.menu > li > a:hover{ color: @yellow; } 	
		.menu > li .sub-menu li a:hover{ color: @yellow; }
	}

	.menu {
		list-style: none;

		> li {

			width: 100%;
			position: relative;
			padding-bottom: 15px;

			> a {

				display: block;
				padding: 12px 12px 5px 12px;
				color: white;
				text-transform: uppercase;
				position: relative;
				pointer-events: none; 
				font-weight: 800;

				&:before{
					content: "";
					width: 10px;
					height: 55px;
					position: absolute;
					right: -10px;
					top: 0;
				}
			}

			&:hover .sub-menu {
				display: block;
			}

			.sub-menu{

				list-style: none;
				width: 100%;

				li {
					
					a {
						display: block;
						padding: 5px 12px;
						color: white;
					}
				}
			}
		}
	}
}

#myslider {

	.carousel-indicators li {
		background-color: transparent;	
		border: 1px solid @blue;
		border-radius: 10px;

		&.active {
			background-color: @blue;
		}
	}

	.carousel-inner {
		.item{

			height: 450px;
			width: 100%;

			background-repeat:no-repeat;
			background-position: center;

			webkit-background-size: cover; /* pour anciens Chrome et Safari */
			background-size: cover; /* version standardisée */

			.carousel-caption {
				 text-shadow: 0 0px 1px rgba(0, 0, 0, 0.3);
				 background-color: rgba(255,255,255, 0.5);
				 bottom: 0;
				 padding-bottom: 55px;
				 color: #303030;
			}



			.slide_button {
				padding: 12px 20px;
				display: inline-block;
				color: white;
				.rounded(3px);
				background-color: @yellow;
				margin-top: 20px;
				text-transform: uppercase;

				&:hover {
					background-color: @blue;
					opacity: 1;
				}
			}
		}
	}
	.carousel-control {
		span{
			line-height: 450px;
			font-weight: 200;
			font-size: 80px;
		}
	}
}

#earth{

	margin-top: 15px;
	margin-bottom: 0;


	border: none;

  #map-canvas { height: 450px; width: 100%; }

	.container{
		position: relative;

		.form-container{
			margin-top: 20px;
			position: absolute;
			z-index: 1;
			width: 100% ;
		}
	}

	background: #f7f7f7 ;
}

.content-container + #earth,
#earth + .content-container {
	margin-top: 0;
}


.antenne {
	display: block;
	width: 32%;
	margin-right: 2%;
	background-color: white;
	border: solid 1px rgba(0, 0, 0, 0.15);
	color: @black;
	padding: 7px;
	float: left;
	margin-top: 2%;

	&:hover {
		background-color: @blue;
		opacity: 1;
		color: white;
	}

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

}

.fancybox {
	border: solid 7px rgba(0, 0, 0, 0.15);
	display: block;
	float: left;
	margin-right: 10px;
	&:hover {
		border: solid 7px @blue;
		opacity: 1;
	}
}


// HERE COMES THE RESPONSIVE

@media (max-width: 991px) { //MOBILES & TABLETS 

	.ariane {
		display: none;
	}
	.navbar-default {

		border: 0; 

		&.asso  {
			.navbar-nav {
				margin: 0 -15px;
				> li a{ color: white; font-weight: bold; text-transform: uppercase;}
				.open > a { background-color: @yellow; }
				.open .dropdown-menu > li > a { color: white; }
			}
			background-color: @yellow;
		}
		&.patient {
			.navbar-nav {
				margin: 0 -15px;
				> li a{ color: white; font-weight: bold; text-transform: uppercase;}
				.open > a { background-color: @blue; }
				.open .dropdown-menu > li > a { color: white; }
			}
			background-color: @blue;
		}


	}

	.portail:not(.accueil),
	.portail.accueil {

		position: relative;
		max-width: 100%;
		width: 100%;
		right: auto;
		bottom: auto;

		a{
			float: left;
			width: 50%;
			margin: 0;
		}
	}

	.accueil-portail {
		background-image: none !important;
		height: auto !important;
		text-align: left !important;

		span {
			margin: 0 !important;
		}

		> span:first-child {
			&:before {
				content: "► Zone " !important;
				display: inline !important;
				font-size: 1em !important;
			}
		}
	}

	#header-container .header {

		text-align: center;
		margin: 15px auto;
		padding: 0;
		height: auto;

		a {
			 display: block;
			 img{
				height: 75px;
				width: auto;
			}
		}
	}


	#footer-container-mobile {
		.column {

			padding: 7.5px 0;

			width: 50%;
			float: left;
			color: white;
			text-align: center;

			border-top: solid 1px lighten(@blue, 20%);


			a {
				display: block;
				color: white;
				padding: 7px;
			}
		}
	}
}