/* #######################
		GLOBAL
	####################### */
	
	*:focus, main a:active, main a:focus, main a:hover, aside a:active, aside a:focus, aside a:hover {
		outline:2px solid #78aeda;
	}

	*{
		margin: 0;
		font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
		font-size: 14px;
	}
	
	

	small{
		font-size: 12px;
	}
	
	
	/* 
	*	DEBUG
	*
	*	Note : if is DEBUG active
	*	then it crash the caroussel siema 
	*/
	/*
	div{
		border: 1px solid red;
	}
	*/


	input[type=text],
	input[type=email],
	input[type=password]{
		width:98%;
		background: white;
		color: #283150;
		border: 1px solid #c7c7c7;
		padding: 0.3em;
		font-size: 18px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	.col2{
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
		padding-top:1em;
	}

	.col-left{
		/*border: 1px solid springgreen;*/
		width: 48%;
		float:left;
		margin-top:30px;
	}

	.col-right{
		/*border: 1px solid yellow;*/
		float: left;
		width:51%;
		/*margin-left:5px;*/
	}

	.case{
		margin:2em;
		padding: 1em;
		overflow:hidden;
	}

	/* For break inside column */
	.brinside{
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.gris{
		background: #e9e9e9;
		color: black;
	}

	.upjv{
		background: #283150;
		color: white;
	}

	.upjv a, .upjv a:hover{
		color: white;
	}

	.upjv a:focus{
		outline:2px solid white;
	}

	.utc{
		background: #ffd30f;
		color: white;
	}


  
	/* *****************************************
	  Custom checkboxes with CSS only
	  "automatic" fallback for IE

	  Custom styles on modern browsers.
	  Classical checkboxes on IE8 and lower.

	  by @geoffrey_crofte
	  see also Flat UI Styles for Checkboxes

	Source : http://codepen.io/CreativeJuiz/pen/BiHzp
	***************************************** */
	/* Base for label styling */
	[type="checkbox"]:not(:checked),
	[type="checkbox"]:checked {
		position: absolute;
		left: -9999px;
	}
	
	[type="checkbox"]:not(:checked) + label,
	[type="checkbox"]:checked + label {
		position: relative;
		padding-left: 1.95em;
		cursor: pointer;
	}

	/* checkbox aspect */
	[type="checkbox"]:not(:checked) + label:before,
	[type="checkbox"]:checked + label:before {
		content: '';
		position: absolute;
		left: 0; 
		top: 0;
		width: 1.25em; 
		height: 1.25em;
		border: 2px solid #ccc;
		background: #fff;
		border-radius: 4px;
		box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
	}
	
	/* checked mark aspect */
	[type="checkbox"]:not(:checked) + label:after,
	[type="checkbox"]:checked + label:after {
		content: '✔';
		position: absolute;
		top: .1em; 
		left: .3em;
		font-size: 1.3em;
		line-height: 0.8;
		color: #283150;
/*		color: #09ad7e;*/
		transition: all .2s;
	}
	
	/* checked mark aspect changes */
	[type="checkbox"]:not(:checked) + label:after {
		opacity: 0;
		transform: scale(0);
	}
	
	[type="checkbox"]:checked + label:after {
		opacity: 1;
		transform: scale(1);
	}
	
	/* disabled checkbox */
	[type="checkbox"]:disabled:not(:checked) + label:before,
	[type="checkbox"]:disabled:checked + label:before {
		box-shadow: none;
		border-color: #bbb;
		background-color: #ddd;
	}
	
	[type="checkbox"]:disabled:checked + label:after {
		color: #999;
	}
	
	[type="checkbox"]:disabled + label {
		color: #aaa;
	}
	
	/* accessibility */
	[type="checkbox"]:checked:focus + label:before,
	[type="checkbox"]:not(:checked):focus + label:before {
		border: 2px solid #78aeda;
	}

	/* hover style just for information */
	label:hover:before {
		border: 2px solid #4778d9!important;
	}

	/* hover style just for information */
	label {
		line-height:2em;
	}

	select, option{
		color: #283150;
		width:98%;
		background: white;
		padding: 0.2em;
		font-size: 18px;
	}

	select{
		border: 1px solid #c7c7c7;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;		
	}

	/* #######################
		SKIP TO CONTENT
	####################### */
	a.skip-main {
		left:-999px;
		position:absolute;
		top:auto;
		width:1px;
		height:1px;
		overflow:hidden;
		z-index:-999;
	}
	a.skip-main:focus, a.skip-main:active {
		background: #2076b7;
		cursor: pointer;
		color: white;
		border: 0px;
		/* padding: 0.5em 3em;	 */
		padding:5px;
		font-size: 18px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		left: 0px;
		top: auto;
		width: auto;
		height: auto;
		overflow:auto;
		/* margin: 10px 35%; */
		margin: auto;
		text-align:center;
		/* font-size:1.2em; */
		z-index:999;
	}

	/* #######################
		HEADER
	####################### */
	.header{
		margin:auto;
		width: 80vw;
	
	}
	
	#header{
		float: left;
		padding: 0.25em;
	}
	
	#menuprincipal{
		float: left;
	}
	
	#menu {
		list-style-type: none;
		bottom: 0;
		padding: 0;
		border: 0px solid green;
		margin-top: 67px;
	}

	#menu li {
		text-transform: uppercase;
		padding: 0 10px;
		display: inline;
	}


	#menu li a{
		color: black;
		text-decoration: none;
		/*padding: 14px 16px;*/
		display: inline;
	}
	
	#menu li a.active{
		color: #283150;
		font-weight: bold;
		text-decoration: none;
		display: inline;
	}
	
	#menu li a:hover{
		color: #2076b7;
		font-weight: bold;
	}
	
	.clearfix{
		clear: both;
	}
	
	#logo{
		border: 0px solid silver;
	}
	
	.burgerbtn{
		display: none;
	}
	
	
	.visible{
		display: block !important;
	}
	

	.invisible{
		display: none !important;
	}
	


  
 /* ***************************************************************
  * 			MENU CONNECTER	#e9e9e9
  *************************************************************** */
 
	#submenu{
/* 		border:1px solid red; */
		margin:auto;
		width: 80vw;
	}

	.nav,
	.nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	/* Top level nav */
	.nav {
		float: left;
		width:100%;
		margin: 20px 0;
		background: white;
	}

	/* Dropdowns */
	.nav ul {
		position: absolute;
		top: 2.8em;
		left: -9999px;
		opacity: 0;

		-webkit-transition: 0.1s linear opacity;

		min-width: 200px;
		border: 1px solid black;
		background: rgba(255,255,255,0.9);
	}

	.nav li {
		float: left;
		position: relative;
	}

	/* Top level nav items */
	.nav li > a {
		float: left;
		padding: 10px 15px;
		color: #283150; 
		font-size:18px;
		text-decoration: none;
	}

	/* Top level hover state, preserve hover state when hovering dropdown  */
	.nav li > a:hover,
	.nav li > a:focus,
	.nav li:focus > a,
	.nav li:hover > a {
		background: #0074b3;
		color:white;
		outline: 0;
	}

	.nav li:hover ul,
	.nav li:focus ul,
	ul.show-menu {
		left: 0;
		opacity: 0.99;
	}

	.nav ul li {
		float: none;
		position: static;
	}

	.nav ul a {
		float: none;
		display: block;
/* 			color: #FFF; */
		color:#283150;
/* 			font-size: 12px; */
		text-shadow: none;
		border: 1px solid #222;
		border-width: 0 0 1px;

		-webkit-transition: 0.1s linear all;
	}


	.nav ul a:hover,
	.nav ul a:focus {
		background: #e9e9e9;
		color: #0074b3;
		text-shadow: none;
	}
	
	.nav li.rightli{
		float: right;
	}

	.nav li.rightli ul.show-menu{
		left: auto;
		right: 0;
	}


	 
 /* ***************************************************************
  * 			FIN MENU CONNECTER
  *************************************************************** */

	/* #######################
		BANNIERE
	####################### */
	.ban{
		margin:auto;
		width: 80vw;
		position: relative;
		z-index: -1;
		margin-bottom: -70px;	/* Need to be same as .caption-control */
	}

	.ban img{
		width: 80vw;
/* 		height:150px; */
	}
	




	/* #######################
		CAROUSSEL
	####################### */
	.siema{
		margin:auto;
		width: 80vw;
		position: relative;
		z-index: 1;
		margin-bottom: -70px;	/* Need to be same as .caption-control */
	}

	.siema img{
		width: 80vw;
	}
	
	.siema-prev{
		left:4px;
		top: 170px;
		border:0;
		position: absolute;
		background:0;
		z-index:100;
	}
	.siema-next{
		right:4px;
		top: 170px;
		border:0;
		background:0;
		position: absolute;
		float:right;
	}	

	.caption-control{
		position: relative;
		z-index:12;
		top: 0;
		/*background: #283150;*/
		background: transparent;
		color: white;
		/*opacity: 0.4;*/
		width: 80vw;
		height: 32px;
		line-height: 30px;
		margin: auto;
		clear:both;
	}
	
	.caption-control .inner{
		padding:0.1em;
		z-index:14;
	}
	
	
	.caption-control .inner .left{
/*		border:1px solid red;	*/
		margin-left:1em;
		float:left;
	}
	
	.caption-control .inner .left a{
		color:white;
	}
	
	.caption-control .inner .right{
		margin:6px 0px 0 0;
/*		border:1px solid yellow;	*/
		float:right;
	}
	
	
	
	.caption-control .inner .right button{
		background:0;
		color:#283150;
		border:0;
	}

	.caption{
		float: left;
		position: absolute;
		left: 12px;
		top: 100px;
		padding:0.2em;
		box-shadow:8px 8px 10px #777; 
		background: #283150;
		color: white;
		opacity: 0.4;
		width: 25vw;
		line-height: 30px;
		margin-top: 0;
	}


	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0,0,0,0);
		border: 0;
	}


	/* #######################
		ICON AREA
	####################### */
	#picto-nav {
		/*border:1px solid red;*/
		position: relative;
		width: 80vw;
		background: #0074b3;
		padding: 5px 0;
		color: white;
		margin: auto;
		z-index:14;
		height: 36px;
	}

	#picto-nav ul {
		/*border:1px solid green;*/
		background-color: #0074b3;
		color: white;
		/*color: rgb(40, 49, 80);*/
		margin: auto;
		text-align:center;
	}

	#picto-nav li {
		/*border:1px solid orange;*/
		display: inline;
		list-style: none; /* pour enlever les puces sur IE7 */
		margin: 10px;
		font-size: 1.6em;
	}

	#picto-nav li a{
		/*padding:6px;*/
		font-size: .6em;
	}







/*

icon-area
	inner icon-height
		globalcontainer
			container
				bullet
					a
						i
*/

	#icon-area{
		/*border:1px solid red;*/
		position: relative;
		width: 80vw;
		background: #0074b3;
		padding: 0px;
		color: white;
		margin: auto;
		z-index:14;
		height: 36px;
	}
	
	.icon-height{
		height:4.2em;
	}
	
	#icon-area .inner{
		padding:5px;
		text-align:center;
	}
	
	.globalcontainer{
		border:1px solid red;
		position:absolute;
		left:50%;
		transform:translateX(-50%);
/*		border:1px solid orange;*/
		margin:auto;
		
	}
	
	#icon-area .inner .container{
		float:left;
		background-color:white;
		width:2em;
		height:2em;
/* 		border:1px solid green; */
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		margin:0 1.5em 0 auto;
		top:2em;
	}
	
	
	
	#icon-area .inner .container .bullet{
		font-size: 1.2em;
		color: rgb(40, 49, 80);
/* 		border: 1px solid red; */
		height: 3em;
		position: relative;
		top:50%;
		transform: translateY(-.5em);
	}
	


	/* #######################
		MAIN CONTENT
	####################### */
	#content{
		width: 80vw;
		margin: auto;
		margin-bottom:2em;
		border: 0px solid red;
	}

	h1, h2{
		color: #283150;
	}
	
	h1{
		font-size: 3em;
		line-height: 2em;
	}

	h1 > abbr, h2 > abbr{
		font-size: 1em;
	}

	h2{
		font-size: 1.5em;
		margin-left: 1.2em;
		margin-top: 0.4em;
		margin-bottom: 1.0em;
		line-height: 1.2em;
	}

	#content h2::before {
		content: ">"; 
		margin-right:0.3em;
		display: inline-block; 
	}

	p{
		margin-bottom:0.5em;
		margin-left: 2.8em;
	}

	#content ul {
		list-style: none;
	}

	#content ul li::before {
		content: "•"; 
		color: #283150;
		display: inline-block; 
		width: 1em;
		margin-left: 1em;
	}

	
	.btn, .btn:hover{
		background: #2076b7;
		cursor: pointer;
		color: white;
		border: 0px;
		padding: 0.5em 3em;
		font-size: 18px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	
	.btn-2, .btn-2:hover{
		background: #2076b7;
		cursor: pointer;
		color: white;
		border: 0px;
		padding: 0.5em 2em;
		font-size: 16px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	
	.btn-3, .btn-3:hover{
		background: #2076b7;
		cursor: pointer;
		color: white;
		border: 0px;
		padding: 0.25em 0.75em;
		font-size: 14px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	
	a.btn-3{
		line-height:1.8em;
	}


	.text-center{
		text-align: center;
	}
	
	/* LISTING TABLE STYLE */
	table.listing {
		border: 0;
		width: 100%;
		border-collapse:collapse;
	}
	
	tr.listing{
		border-top:1px solid #e9e9e9;
	}
	

	/* #######################
		ACTUALITES
		
		Gris de fond : e8e9e9
		e9e9e9
	####################### */
	#content .actu img{
		width:33vw;
		float: left; 
		margin: 0px 15px 15px 0px;
	}
	
	#content h1 img{
		vertical-align:middle;
		width:3em;
	}
	
	.actu{
		margin-bottom:2em;
		background: #e9e9e9;
		overflow:hidden;
	}
	
	/* #######################
		MISSION NUMERIQUE
	####################### */
	#content h1 .misnum{
		width:18em;
		margin-top:1em;
	}

	/* #######################
		LOGIN
	####################### */
	.login{
		width:40vw;
		background:#e9e9e9;
		border: 1px dotted transparent;
		margin:auto;
	}
	
	.login p, .login div p, .login div {
		margin:auto;
	}
	
	.login div {
		border: 0px solid red;
		width: 90%;
		padding-bottom:2em;
	}

	
	.login input[type=submit]{
		background: #2076b7;
		color: white;
		border: 0px;
		padding: 0.5em 3em;
		font-size: 18px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	.lglog{
		position:relative;
		left:50%;
		transform: translateX(-50%);
		height:89px;
		width:89px;
		background-image:url('/apiu/app/img/page/login/ico-login.png');
		background-repeat: no-repeat;
		border:0px solid red;
	}
	
	.login label{
		line-height:2em;
	}

	


	.wrapper {
		border: 0px solid red;
		width: 98%;
		background: white;
		padding: 0px 10px 0px 10px;
		top:10px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		color:#e9e9e9;
	}

	.wrapper i{
		  vertical-align: middle;
	}


	.wrapper input{
		font-size:16px;
		line-height:2em;
		border: 0px solid red;
		width: 90%;
	}


	/* #######################
		AGENDA
	####################### */
	#calendar{ 
		border-collapse: collapse;
		width:80vw;
		margin:auto;
	}

	#calendar tr td{
		width:11.4vw;
		height:80px;
		vertical-align:top;
	}
	
	#calendar .numero{
		float: left; 
		position: relative; 
		color: rgb(40, 49, 80);
	}
	
	#calendar .evenement{
		float: left; 
		clear: both; 
		width: 100%; 
		height: 100%;
	}

	#calendar .book{
		border:1px solid sandybrown;
		border-radius: 20px;
		padding:0 6px 0 6px;
		background-color: sandybrown;
		margin: 2px 0px 2px 0px;
		float: left;
	}
	
	#calendar td.today{ 
		border:2px solid #D90000; 
	}

	#calendar td.feries{ 
		background-color: #DFDFDF;
	}

	#calendar .weekend{ 
		background:#DFDFDF;
	}
	
	#calendar thead td{ 
		vertical-align: middle;
		border: 0;
		height: 20px;
	}
	
	.center{
		text-align: center;
	}

	.left{
		text-align: left;
	}
	
	.right{
		text-align: right;
	}


	/* #######################
		FORUM
	####################### */

	.form{
		width:90%;
		background:#e9e9e9;
		border: 1px dotted transparent;
		margin:auto;
		margin-bottom:2em;
	}
	
	.form p{
		margin: 0.5em;
	}

	.lgd_form{
		background-color: #283150;
		color: white;
		font-weight: bold;
		border-radius: 4px;
		padding: 4px;
	}
	
	h3.forum{
		font-size: 1.5em;
		margin-left: 1.2em;
		line-height: 2em;
	}


	.even{
		background-color:#f2f2f2;
	}

	/* Reponse */
	.forumReponse:hover{
		background-color:#e9e9e9;
	}
	
	.forumReponse{
		padding:1em;
		margin:0 auto 1em auto;
		border:0px solid red;
		width:75vw;
	}
	
	.forumReponseHeader{
		position:relative;
		float:right;
		right:-0.5em;
		top:-0.5em;
		border:0px solid green;
	}
	
	.forumReponseTitre{
		position:relative;
		float:left;
		left:-0.5em;
		top:-0.5em;
		border:0px solid pink;
	}
	
	.forumReponsePar{
		margin-bottom:0.2em;
	}
	

	/* Question */
	.forumQuestion{
		padding:1em;
		margin:0 auto 1em auto;
		border:0px solid red;
		width:75vw;
	}


	.forumQuestionDetail{
		float:right;
/*		padding:1em;*/
		padding-left:0 !important;
/*		margin:0 auto 1em auto;*/
		border:0px solid yellow;
/*
		right: 0;
		top: 0;
*/
	}


	.forumQuestionHead{
		float:left;
		padding:1em;
		/*margin:0 auto 1em auto;*/
		border:0px solid green;
		right: 0;
		top: 0;
		width:55vw;
	}

    
	#forumInfo{
		color: #283150;
		margin: 0;
		padding: 0;
	}
	
	#forumInfo li:before{
		list-style-type: none; /* Remove list bullets */
		content: "";	/* hacks for non displaying the bullet item */
		padding: 0;
		margin: 0;
	}




	
	

	/* #######################
		MESSAGE BOX
	####################### */
	.alert-error{
		background-color: rgb(235, 204, 209);
		border: 1px solid rgb(169, 68, 66);
		padding: 15px;
		font-size: 14px;
		line-height: 20px;
		margin-bottom: 20px;
		color: rgb(169, 68, 66);
		box-sizing: border-box;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	}

	.alert-warning{
		background-color: rgb(250, 235, 204);
		border: 1px solid rgb(138, 109, 59);
		padding: 15px;
		font-size: 14px;
		line-height: 20px;
		margin-bottom: 20px;
		color: rgb(138, 109, 59);
		box-sizing: border-box;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	}
	
	.alert-info{
		background-color: rgb(188, 232, 241);
		border: 1px solid rgb(49, 112, 143);
		padding: 15px;
		font-size: 14px;
		line-height: 20px;
		margin-bottom: 20px;
		color: rgb(49, 112, 143);
		box-sizing: border-box;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	}
	
	.alert-valid{
		background-color: rgb(223, 240, 216);
		border: 1px solid rgb(60, 118, 61);
		padding: 15px;
		font-size: 14px;
		line-height: 20px;
		margin-bottom: 20px;
		color: rgb(60, 118, 61);
		box-sizing: border-box;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	}
	


	/* #######################
		LIEN
	####################### */
	a{
		color: #2076b7;
		text-decoration: none;
	}
	
	a:hover{
		color: #283150;
	}
	

	/* #######################
		FOOTER
	####################### */
	#partner{
		width: 80vw;
		margin:auto;
	}

	#partner .partnergrp{
		float:left;
		padding:20px;
		margin:auto;
	}

	#partner .partnergrp .note{
		float:right;
	}


	#partner .partnergrp .note sup, #partner .partnergrp .note sup a{
		font-size:10px;
		font-weight: normal;
	}


	
	#copyright{
		background:#283150;
		margin-top:1.5em;
		color:white;
		padding:2em 0.50em 2em 0.50em;
	}

	#copyright a{
		color:white;
		float: right;
	}
	
	#copyright a i{
		padding:0.25em;
		line-height: 0.15em;
	}
	




	/* #######################
		MEDIA QUERY
	####################### */

	
	/*
		When menu push under logo, remove margin top
		  Uncomment when item was added
	*/
	/*
	@media screen and (min-width: 819px) and (max-width: 1117px) {	
		#menu {
			margin-top: 1em;
			margin-bottom:1em;
		}
	}
	*/
	
	/*
		Smartphone view ; burger menu apparition
	*/
	@media screen and (max-width: 905px) {
		.burgerbtn{
			display: block;
			float: right;
			margin: 0.50em 0.50em 0 0; 
		}
		
		#menuprincipal{
			display: none;
		}
		
		#menu {
			width: 98vw;
			margin-top: 0;
		}

		#menu li {
			padding: 0.5em;
			text-align:center;
			display: block;
		}	
		
		.login{
			width:70vw;
		}

		.col-left, .col-right{
			float: none;
			width: 100%;
		}

	}

	
	/*
		Smartphone view ; burger menu apparition
	*/
	@media screen and (max-width: 767px) {
		.header{
			width: 98vw;
		}

		#picto-nav{
			width:98vw;
		}

		.siema, .caption-control, .siema-next, .siema-prev, .ban{
			display: none;
		}
		
		#content{
			width: 98vw;
		}
		
		#partner{
			width: 98vw;
		}
		
		h1{
			font-size: 2em;
			line-height: 2em;
		}

		h2{
			font-size: 1.5em;
			margin-left: 1.5em;
			line-height: 1.3em;
		}

		/* Reset les colonnes en mode smartphone */
		.col2{
			-webkit-column-count: 1; /* Chrome, Safari, Opera */
			-moz-column-count: 1; /* Firefox */
			column-count: 1;
			padding-top:1em;
		}


	}


	@media screen and (min-width: 767px) {
/*	@media screen and (min-width: 1024px) {	*/
		.siema img{
			width:40vw;
		}

	}