body {text-align: center; background-color: #fff;background-color:#eee; 
font-family:verdana, sans-serif; word-spacing: 0px; margin: 0; font-size:0.9em;}
.inscr_error {
	color:red; 
	width:90%;
	margin-left:auto; margin-right: auto;
}
.titre {
	color: #000;
	font-size: 2.5em;
}

#login {
	padding-top: 50px;
    border: 0px;
	width: 80%;
	margin-left:auto;
	margin-right:auto;
	
}
#inscription {
	padding-top: 50px;
	width:80%;
	margin-left:auto;
	margin-right:auto;
}
/* input[type=text], input[type=password] */
.login {
    width: 300px;
	text-align: center;
    padding-top: 20px;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
    margin: 20px 0;
    display: inline-block;
    border: 1px solid #ccc;
	opacity: 0.8;
	box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.8) inset;
	
}

.ok {
	font-size: 1em;
    background-color: #4a6da7;
    color: white;
	border: 2px;
    padding: 14px 14px;
    margin-top: 20px;
    border: none;
    cursor: pointer;
	left: auto;
	right: auto;
    width: 200px;
}
.ok:hover {
    opacity: 0.8;
}
#menus {width: 100%; height: 45px;padding-top:30px;background-color:#eee;vertical-align:bottom;text-align:center;}
.menu {position:relative; display:inline-block; vertical-align:middle; height: 45px;  bottom:5px;
padding: 2px; margin-left: 0px;
background-color:#4a6da7;color:#fff;padding-left: 5%;padding-right: 5%;
z-index: 0; border: 0px;box-shadow:inset 0px -5px 3px -3px rgba(0, 0, 0, 1);
}
.menu:hover { opacity:0.8;}
.menu:focus {outline: 0px;}
.menuactif {position:relative; display:inline-block; vertical-align:middle; padding-Top:10px;
padding: 2px; margin-left: 0px; height:55px;border: 0px;border-radius:10px 10px 0px 0px;font-weight: bold;font-size: 1em;bottom:10px;
background-color: #c0c8d6;color:#000;padding-left: 5%;padding-right: 5%;box-shadow:3px -3px 3px rgba(0, 0, 0, 0.9), -3px -3px 3px rgba(0, 0, 0, 0.9);
 z-index: 20000;}
.menuactif:focus {outline: 0px;}
.menuInfo {
	background-image:url(../../IMG/ico_new.png);
	background-repeat: no-repeat;
	background-size:50% 60%;
	background-position:top right;
}
.globale {
	display:inline-block;
	text-align: center;
	height:auto;
	overflow: hidden;
	padding: 0px ;
	
	background-color: #FFF;
	border-radius: 10px;
	padding-bottom: 40px;
	margin-left:auto;
	margin-right:auto;
	box-shadow:3px -3px 10px rgba(0, 0, 0, 1), -3px 3px 10px rgba(0, 0, 0, 1);
	z-index:100;
}
#caluser {
	display:block;
	margin-Top:10px;margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.titreD {
	position:static; margin-right: 15%; color:#fff; margin-bottom:0px; max-width:85%; padding:0px; text-align:center; background : #e48515;z-index:10;
}
.titreF {
	margin-left: 15%; margin-Top: 0px;margin-bottom:0px;  min-width:85%; padding:0px; text-align:center; background-color: #afc0dc;
}
.dateD {
	width:99%; line-height:25px; margin-Top: -5px;margin-bottom:0px; float:left; margin-left: 5%; padding:0; vertical-align:center; text-align:left; font-weight: bold; font-style: italic;font-size:10px;
}
.dateF {
	width:99%; line-height:25px; margin-Top: -5px;margin-bottom:0px; float:right; margin-right: 5%; padding:0; vertical-align:center; text-align:right; font-weight: bold; font-style: italic;font-size:10px;
}
.Directive {
	float:left; text-align: left; text-align:justify; width: 75%; min-width:30%; max-width:500px; background-color: #fcf8f7; border-radius : 0px 20px 20px 20px; padding: 10px; margin-Top : 20px; margin-left: 10px;
	box-shadow: 0px 0px 4px 1px rgba(228,133,21, 1);
}
.Fait {
	float:right;text-align: left; text-align:justify; width: 75%; min-width:30%; max-width:500px; background-color: #f7f9fc; border-radius : 20px 0px 20px 20px; padding: 10px; margin-Top : 20px; margin-right: 10px;
	box-shadow: 0px 0px 4px 1px rgba(192,200,214, 1);
}
.Directive span {
	float:left;
	text-align: left;
	background-image: radial-gradient(circle at top left, #FFFFFF, #E0E0E0,#E0E0E0,#FFFFFF,#E0E0E0);
	box-shadow: 0px 0px 4px 3px rgba(228,133,21, 1);
	position:relative;
	margin-left: -10px;
	margin-Top: -30px;
	z-index:11;
	padding:5px 20px 5px 10px;
	border-radius : 0px 0px 20px 0px;
}
.Fait span {
	float:right;
	text-align: right;
	background-image: radial-gradient(circle at top left, #FFFFFF, #E0E0E0,#E0E0E0,#FFFFFF,#E0E0E0);
	box-shadow: 0px 0px 4px 3px rgba(175,192,220, 1);
	position:relative;
	margin-right: -10px;
	margin-Top: -30px;
	padding:5px 10px 5px 20px;
	border-radius : 0px 0px 0px 30px;
}
.TexteD {
	max-width:500px;
}
.TexteF {
	float:right;
	margin:0;
	text-align:left;
	max-width:500px;
}

.addpost {
	min-width: 250px;width:90%;max-width: 400px; text-align:center; margin-left:auto; margin-right:auto; margin-bottom:40px; margin-Top:40px;
}
.addpost select {
  width: 24%; height:31px;margin:0;
}
#titretemp {
width: 73%; height:25px;margin:0;
}
#textemp {
    Width:99%;height:250px; vertical-align:top;
}
.infosup {
	float:left;
}
.infobtn, .infobtnann, .infobtnsav {
	float:right;
}


.pagebreak {display:inline-block; position:relative; width:99%; height:10px;margin-left: auto;margin-right: auto; font-size: 1em;}
#selecteursemaine {padding-top: 10px; width:100%; overflow:hidden; height:70px ;border-bottom: 1px dotted;}
#semaine {position:relative; top:25px;}
#d {position:relative;top:25px;}
#prev {float:left; padding: 10px;}
#next {float:right; padding: 10px;}
#selecteursemaine img {height: 50px; width: auto; opacity: 0.8;}
#selecteursemaine img:hover {opacity: 1; box-shadow: 0px 1px 6px 1px rgba(200, 200, 200, 0.8) inset;}
#selecteurjour { display:inline-block;width:80px; padding-bottom: 0px;vertical-align:top;padding-top: 43px;}
.jours {position: relative; background-color: #4a6da7; color: #FFFFFF; font-size: 1em;
height: 54px; border:0; border-bottom: 1px solid #fff; padding:0px; z-index: 2000;transition: all 0.5s ease}
.jours:hover {opacity: 0.8;}
.jours:focus {outline: 0px;}

.jouractif {position: relative; background-color: #c0c8d6;
color: #000; height: 54px; padding:0px; font-size: 1em;
z-index: 8000;border:0;border-bottom: 1px solid #fff;transition: all 0.5s ease
}
.jouractif:focus {outline: 0px;}

#scrolldiv > div {width:100px;white-space:normal;}
#heures {display:inline-block;width:80px; height: 430px; background-color: #c0c8d6; margin-top: 0px;vertical-align:top;}
#heures p {height:16px;}
#heures button {width:100%; height: 47px; padding: 0px; margin:0; border: 0px; font-size: 1em;text-align:center;letter-spacing:-1px;
background-color: rgba(0, 0, 0, 0); border-top: 1px solid #4a6da7;}
#heures button:focus {outline: 0px;}
#calendrier { display:inline-block; height: 450px; overflow-y: hidden; overflow-x: auto; line-height: 3pt;}
#scrolldiv { display:block;text-align:left;padding: 0px; overflow-x: auto; overflow-y: hidden; height: 440px;white-space:nowrap;}
.site { display:inline-block; max-width:150px; height: auto;padding:0; margin-bottom:20px; background-color: #FFF;}
.site p {height: 45px; min-width:100%;line-height: 18px;padding: 0px; margin: 0px; vertical-align: middle; border-bottom: 1px solid #4a6da7;}
.site button {float:left;width:100%; height: 47px; padding: 0px; font-weight:bold;
border:0; border-bottom: 1px solid #4a6da7;border-right:1px solid #4a6da7;overflow:hidden;
}
.zone {text-decoration:none;color:#000;
}
.sitebutton {font-size: 0.8em; color: #FFFFFF; margin:0;
background-color: #FFFFFF; border-color: #E0E0E0;}
.pourvu {
	font-size: 0.9em; color: #fff;border:0; 
	background-color: #e48515;
	line-height:12px;
	}
.highlight {border-color: rgba(250, 230, 0, 0.7);outline:0px;z-index: 30000;box-shadow: 0px 0px 5px 4px rgba(250, 230, 0, 0.7)inset;}
.temp {	font-size: 0.8em; color: #444;font-weight: bold;margin:0;
	background-color: #FFF;
	}
.duo{font-size: 0.8em; color: #444;font-weight: bold;margin:0;
	background-color: #f8c959;
}
#scrolldiv > div > btn:focus{
	outline: 0px;
}
#scrolldiv > div > btn {
	line-height:8px;
}
#okf {margin-Top:30px;left:auto; right: auto;}
#options {padding-top:40px;}
#cfix {
	padding-top: 40px;
}

#cfix div, #gestion div {float:left; width: 100%; height:22px; margin-left:0px;  margin-bottom:10px;margin-Top:5px;overflow:hidden; word-spacing:0px;padding:0;}
#cfix div span {float:right;width:88%;height:22px;overflow:hidden;margin:0;padding:0;}
#cfix div span select, #gestion div span select {width:100%;max-width:18%;min-width:5%;}
#pagebreak {display:inline-block; position:relative; width:99%; height:10px;margin-left: auto;margin-right: auto; font-size: 2em;}
.text { min-width: 10%;max-width:30%;}
.textred {border-color:red;}
.subbtn { min-width: 10%;margin:0;padding:0px;}
.supprfixbtn {float:left; width: 9%;left:0px;margin:0;}
#gestion {
	padding-top: 40px;
	text-align:center;
	margin-left:auto; margin-right:auto;
}
#gestion p {line-height:22px;margin-top:0;margin-bottom:0;padding:0;}
#gestion div {display:inline-block; height:22px; margin-bottom:10px;margin-Top:0px;overflow:hidden; word-spacing:0px;padding:0;}
#gestion div span {display:inline-block;width:40%;height:22px;overflow:hidden;margin:0;padding:0;padding-left:5px;}
.volsupprbtn {display:inline-block; line-height:22px;width: 12%; height:22px; left:0px;margin:0;padding:0;text-align:center; vertical-align:top;}
#divmenu {float:left; width: 100%; height:21px; margin-left: auto; margin-right: auto; padding-Top: 10px; overflow:hidden;
}
#addfixbtn, #enrfixbtn {display:block; position:relative;font-size: 1em;background-color: #4a6da7;color: white;border: 2px;
padding: 14px 14px;border: none;cursor: pointer;margin-left: auto;margin-right: auto;width: 200px;margin-Top:20px;
}
#addfixbtn:hover, #enrfixbtn:hover {opacity: 0.8;}
#addfix {
	text-align: center;
	z-index: 90000;
	position: fixed;
	left: 0px;
	right: 0px;
	Top: 0px;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.7);
}

#popup {
	text-align: center;
	height:100%;
	z-index: 90000;
	position: fixed;
	left: 0px;
	right: 0px;
	Top: 0px;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.7);
}
#carte {
	text-align: center;
	height:200vh;
	z-index: 90000;
	position: absolute;
	padding:20px;
	left: 0px;
	right: 0px;
	Top: 0px;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.7);
}
#imgcarte {
	display:inline-block;
	position:relative;
	margin-top:30px;
	margin-bottom:50px;
	background-size:100% 100%;
}
#popupdiv, #cartediv {
	top: 10px;
	position: relative;
	z-index: 90000;
	background-color: #eee;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
}
#loadingdiv{
	text-align: center;
	height:100%;
	z-index: 90000;
	position: fixed;
	left: 0px;
	padding-Top:150px;
	right: 0px;
	Top: 0px;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.4);
}
#loadingsvg {
  opacity:0.6;
}
#comment {height: 80%;padding-Top:20px; margin-top:10px; width:98%;margin-left:auto; margin-right:auto;overflow-y:auto;vertical-align:center;}
#comment p {height:30px; width: 90%; margin-left:auto; margin-right:auto;padding:0px;margin-Top:10px;margin-bottom:0px;line-height:30px;}
#comment select, #comment input{float:right; height:28px; width: 50%; min-width: 20%; max-width: 60%;padding:0px;margin:0px;text-align:right; margin-right:10%;}
#comment:focus {

	outline: 0px;
}
#comment input[type="number"] {
	line-height:40px;
	text-align:center;
	font-size:20px;
}
#fermer, #close {
	display: block;
	position: absolute;
	margin:0px;
	text-align: center;
	right: 0px;
	top: 0px;
	font-size: 2.5em;
	height:40px; 
	width:50px;
	color: #4a6da7;
	vertical-align:center;
	border: none;
	border-radius: 40px;
	background-color: #eee;
	
}
#fermer:hover, #close:hover {
	
	text-shadow: 1px 1px 1px rgba(50,50,50,1), -1px -1px 1px rgba(50,50,50,1);
}
.horodatage {
	margin-top: 20px;
}
.comment {
	width: 90%;
	text-align: left;
	height: 300px;
	overflow-y: auto;
    margin: 20px 0;
    display: inline-block;
    border: 1px solid #ccc;
	opacity: 0.8;
	box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.8) inset;
}

/* position des éléments pour un affichage en haute définition */

@media all and (min-width : 1381px){
.globale {width:60%;}
#prev {margin-left:30%;}
#next {margin-right: 30%;}
#cfix div {width:29%;margin-right: 4%; margin-left: 0%;}
#gestion div {width:33%;margin-right: 0%; margin-left: 0%;}
#popupdiv {width: 400px;}
#cartediv {width:70%;max-width:500px;max-height:900px;}
#imgcarte {width:490px;height:750px;}
#heures {width: 70px;}
#selecteursemaine { width:100%;}
#selecteurjour {width: 80px;}
.Fait {margin-right:25%;
}
.Directive {margin-left:25%;
}
.jours { width: 100%; }
.jouractif {width: 100%;border-left: 5px solid #fff;}
#calendrier {}
}
/* position des éléments pour le PC et tablettes de grande taille  */

@media all and (min-width : 701px) and (max-width : 1380px) { 
.globale {width:70%}
#prev {margin-left:10%;}
#next {margin-right:10%;}
#cfix div {width:46%;margin-left: 0%; margin-right:4%;}
#gestion div {width:50%;margin-left: 0%; margin-right:0%;}
#popupdiv {width: 400px;}
#cartediv {width:80%;max-width:500px;max-height:700px;}
#imgcarte {width:490px;height:650px;}
#heures {width: 70px;}
#selecteurjour {width: 80px;}
.Fait {margin-right:10%;
}
.Directive {margin-left:10%;
}
.jours { width: 100%; }
.jouractif {width: 100%;border-left: 5px solid #fff;}
#calendrier {width:60%;}
}

/* position des éléments sur smartphone et tablette  */

@media all and (max-width : 700px) {
.globale{width: 98%;}
#cfix div {width:100%;margin-right: 0px;}
#gestion div {width:50%;margin-right: 0%;}
#popupdiv, #cartediv {width: 96%; height:80vh;}
#imgcarte {width:98%;height:70vh;margin-left:auto;margin-right:auto;}
#heures {width: 14%;}
#selecteurjour { width: 14%; }
.jours { width: 100%; }
.jouractif {width: 100%;border-left: 10px solid #fff;}
#calendrier {width:70%;}
}

/* position des éléments sur smartphone  */

@media all and (max-device-width: 480px) {
.globale{width: 98%;}
#cfix div {width:100%;margin-right: 0px;}
#gestion div {width:50%;margin-right: 0%;}
#popupdiv, #cartediv {width: 96%;height:80vh;}
#imgcarte {width:98%;height:70vh;margin-left:auto;margin-right:auto;}
#heures {width: 14%;}
#selecteurjour {width: 14%;}
.jours { width: 100%; }
.jouractif {width: 100%;border-left: 10px solid #fff;}
#calendrier {width:70%;}
}