/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');


:root {
    --primary_color: #FFFFFF;
    --primary_text_color: #111e4c;
}

html, body {
	height: 100%;
	width: 100%;
  }

  bandeauhaut {
	grid-area: bandeauhaut;
  }
  
  videbas {
	background-color: white;
	grid-area: videbas;
  }

  onglets {
	background-color: var(--primary_text_color);
	grid-area: onglets;
  }

  carte {
	grid-area: carte;
  }
  
  vide {
	background-color: white;
	grid-area: vide;
  }

  logo {
	background-color: white;
	grid-area: logo;
  }

  listeonglets {
	color:white;
	background-color: var(--primary_text_color);
	grid-area: listeonglets;
	padding:0px;
	border:0px;
	line-height:0px;
	vertical-align:middle;
  }

  .onglet {
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color:var(--primary_text_color);
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color:var(--primary_text_color);
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color:var(--primary_text_color);
  }

  urgence {
	background-color: white;
	grid-column: urgence;
  }
  bas {
	grid-column: bas;
	color: white;
	background-color: white;
  }

  .ol-popup {
	position: absolute;
	background-color: white;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
	filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
	padding: 15px;
	border-radius: 10px;
	border: 1px solid #cccccc;
	bottom: 12px;
	left: -50px;
	min-width: 280px;
  }
  .ol-popup:after, .ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
  }
  .ol-popup:after {
	border-top-color: white;
	border-width: 10px;
	left: 48px;
	margin-left: -10px;
  }
  .ol-popup:before {
	border-top-color: #cccccc;
	border-width: 11px;
	left: 48px;
	margin-left: -11px;
  }
  .ol-popup-closer {
	text-decoration: none;
	position: absolute;
	top: 2px;
	right: 8px;
  }
  .ol-popup-closer:after {
	content: "?";
  }

  .ol-dragzoom {
	border-color: red;
	border-width: 3px;
	background-color: rgba(255,255,255,0.4);
  }	

  #lienDepartement {
	padding: 5px 20px 5px 10px;
	display: inline-block;
	vertical-align: middle;
  }

  #logo {
	float: left;
  }

  #inforoutes {
	padding-top: 20px;
	display: block;
	font-size: 52px;
	color: #000000;
	margin: 0 auto; 
	width: 50%;
	font-family: LL Circular Book Web;
	text-align: center;
  }

  #link {
	float: right;
  }

  .link {
	text-align: right;
	font-size: 16px;
	padding-top: 10px;
	margin-right: 10px;
  }

body {
  background-color: white;
  font-family: "LL Circular Book Web";
  padding: 0px;
  font-size: 18px;
  margin: 0px;
  color: #444;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

@font-face {
  font-family: "LL Circular Book Web";
  src: url("fonts/lineto-circular-book.eot");
  src: url("fonts/lineto-circular-book.eot?#iefix") format("embedded-opentype"),
    url("fonts/lineto-circular-book.woff2") format("woff2"),
    url("fonts/lineto-circular-book.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}


.flex-container {
  display: flex;
  flex-wrap: wrap; 
  justify-content: space-between;
}
.flex-container > div {
  width: 100%;
  height: 100%;
  font-family:"LL Circular Book Web";  
}
.paragraph {
  font-family: "LL Circular Book Web";
  font-variant-ligatures: none; /* Ligature reset */
}
.titre {
  font-family:"LL Circular Book Web";
  font-size: 20px;
}
.font {
  font-family:"LL Circular Book Web";
}

#ovale {
  width: 30px;
  height: 10px;
  border-radius: 60px / 40px;
  background: rgb(61,169,72);
  border-color:white;
  border:3px solid white;
}

@media (min-width: 30em) {
  html { font-size: calc(1.125rem + 0vw) }
}

@media (min-width: 100em) {
  html { font-size: 1.125rem }
}

.pointer {
  cursor: pointer;
}

.map {
  width: 100%;
  height: 100%;
}

#entete {
  position: absolute;
  width: 100%;
  height: 88px;
  z-index: 1005;
  background-color: #FFFFFF;
}

#content {
/*position: fixed;*/
  display: flex;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
  border: 1px solid #808080; 
}

/*#evenements, #conditions_meteo, #tous {
  float:left;
  padding: 0px;
  margin: 0px;
  height: 39px;
}*/

#communes_div2 {
  float: right;
  padding: 0px 0px 0px 0px;
  margin: 0px;
  height: 28px;
  width: 279px;
  position: absolute;
  top: 102px;
  right: 12px;

   background-color: #fff;
   border: #4da833 1px solid;
	
   overflow: hidden; 
}

#pre_commune_div {
  float: right;
  padding: 0px 0px 0px 0px;
  margin: 0px;
  /*height: 16px;*/
  width: 32px;
  position: absolute;
  top: 103px;
  right: 291px;
	visibility: hidden;
  overflow: hidden; 
}

#zoomer_sur {
  float: right;
  padding: 12px 5px 11px 0px;
  font-weight: bold;
}


#communes {
  width: 272px;
}

@-moz-document url-prefix() {
  #communes {
    padding: 8px 0px 0px 0px;
  }	
}

#evenements_en_cours, #evenements_a_venir, #etats_surface {
  /*float:left;
  padding: 15px 10px 15px 10px;
  height: 22px;*/
}

/* .selectedTab { */
  /* background-color: #ADC800; */
  /* border-left: 1px solid #ADC800;  */
/* } */

#ligne0 {
  height: 80px;
}

#ligne1 {
  width: 100%;
  height: 39px;
  border-right: 2px solid #FFFFFF; 
}

#ligne2 {
  height: 49px;
  width: 100%;
  background-color: #ADC800;
  border-right: 1px solid #ADC800; 
  border-left: 1px solid #ADC800; 
  /*	margin: -1px; */
}

#date_maj {
  float:right;
  padding: 20px 10px 20px 10px;
  height: 22px;
  font-size:18px;
}

#chargement {
  border: 1px solid #FF0000 !important;
  top: 40%;
  left: 40%;
  padding: 20px;
  position: absolute;
}

#tous {
  padding: 12px 10px 0px 10px;
  height: 27px;
}

.clear {
  clear: both;
}

.olControlScaleLine {
  right: 10px;
  left: auto !important;
}

.olControlPanZoomBar {
  top: 99px !important;
}

.olPopup {
  border: 1px solid #FF0000 !important;
  height: auto !important;
}

.olPopupContent {
  height: auto !important;
}

.olPopupCloseBox {
  background: url(../ressource/images/infobulle/fermer.png) !important;
  width: 23px !important;
  height: 22px !important;
  right: 0px !important;
  top: 0px !important;
}

.olControlMousePosition {
  display: none !important; 
}

.zoomPanel {
  background: url(../ressource/images/panelZoomBack.png);
  top: 102px;
  left: 12px;
  width: 95px;
  height: 248px;
  position: absolute;
  z-index: 1005;
}

#cb_en_cours, #cb_a_venir {
  vertical-align: middle;
}

.img_checked {
  background-image : url(../ressource/images/checkbox_coche.png);
  width: 16px;
  height: 16px;
  outline: none;
}

.img_not_checked {
  background-image : url(../ressource/images/checkbox.png);
  width: 16px;
  height: 16px;
  outline: none;
}

#span_en_cours, #span_a_venir {
  vertical-align: middle;
  padding-left: 2px;
}

.buttonZoomIn {
  background: url(../ressource/images/zoom_plus.png);
  height: 26px;
  width: 26px;
  top: 50px;
  left: 15px;
  position: absolute;
}

.buttonZoomOut {
  background: url(../ressource/images/zoom_moins.png);
  height: 26px;
  width: 26px;
  top: 150px;
  left: 15px;
  position: absolute;
}

.buttonZoomBox {
  background: url(../ressource/images/zoom_box.png);
  height: 40px;
  width: 41px;
  top: 190px;
  left: 30px;
  position: absolute;
  visibility: hidden;  
}

.sliderZoom {
  border: none !important;
  top: 40px;
  left: 55px;
  height: 112px !important;
  margin-top: 15px;
  width: 15px !important;
  background: url(../ressource/images/zoom_echelle.png) !important;
  position: absolute;	
}

.sliderZoom > a {
  border: none !important;
  width: 13px !important;
  height: 16px !important;
  margin-bottom: -8px !important;
  margin-left: 6px !important;
  background: url(../ressource/images/zoom_cursor.png) !important;
  position: absolute;
}

.buttonZoomBoxActif {
  background: url(../ressource/images/zoom_box_actif.png);
  height: 40px;
  width: 41px;
  top: 190px;
  left: 30px;
  position: absolute;
}

.customLayerSwitcher {
  position: absolute;
  z-index: 1003;
  bottom: 21px;
  background-color: #000000;
  left: 358px;
}

.customLegende {
  position: absolute;
  z-index: 1006;
  bottom: 25px;
  background-color: #000000;
  left: 12px;
}

.legendeDiv {
  width: 100%;
  color: #000000;
  background-color: #ECECED;
  padding: 10px;
  width: 315px;
}

.legendeTitre {
  height: 40px;
  width: 335px;
  cursor: pointer;
}

.filtresDiv {
  width: 100%;
  color: #000000;
  background-color: #ECECED;
  padding: 10px;
  width: 236px;
}

.filtresTitre {
  height: 40px;
  width: 256px;
  cursor: pointer;
}

.dataLbl {
  display: none;
}

.baseLbl {
  display: none;
}

.popup {
  position: absolute;
  background-color: #FFFFFF;
  border: 2px solid #FF0000;
  z-index: 1050;
}

.popup_closeBox {
  background: url(../ressource/images/infobulle/fermer.png);
  position: absolute;
  width: 23px;
  height: 22px;
  right: 0px;
  top: 0px;
}

.popup_titre {
  font-size: 14px;
  line-height: 24px;
  font-weight: bold;
  border-bottom: 1px dotted;
  margin: 10px 20px 5px 0px;
  padding: 0px;
}

.popup_content {
  font-size: 14px;
  margin-bottom: 5px;
}

.popup_content_hide {
  font-size: 14px;
  display: none;
}

.popup_ul {
  margin: 0px;
  padding: 5px;
  list-style-image: none;
}

.li_moins {
  list-style-type: none; /* on annule la puce par défaut */
  background-image: url(../ressource/images/infobulle/moins.png); /* on affiche l'image souhaitée */
  background-repeat: no-repeat; /* on annule la répétition par défaut */
  background-position: left top; /* on positionne où l'on veut */
  padding-left: 32px; /* pour éviter la superposition du contenu */
  maring-left: -32px; /* pour éviter la superposition du contenu */
}

.li_plus {
  list-style-type: none; /* on annule la puce par défaut */
  background-image: url(../ressource/images/infobulle/plus.png); /* on affiche l'image souhaitée */
  background-repeat: no-repeat; /* on annule la répétition par défaut */
  background-position: left top; /* on positionne où l'on veut */
  padding-left: 32px; /* pour éviter la superposition du contenu */
  maring-left: -32px; /* pour éviter la superposition du contenu */
}

.legende {
  padding:0;
  margin:0;
  list-style-type:none;
}

.legende_img {
  float: left;
  height: 35px;
  width: 30px;
  line-height: 35px;
}

.legende_img > img {
  vertical-align:middle;
  width:30px;
}

.legende_texte {
  float: left;
  height: 35px;
  line-height: 35px;
  width: 275px;
  padding-left: 10px;
  vertical-align: middle;
}

.olControlNoSelect {
  -moz-user-select: none;
  -khtml-user-select: none;
}
.olControlScale {
  right: 3px;
  bottom: 3em;
  display: block;
  position: absolute;
  font-size: smaller;
}
.olControlScaleLine {
  display: block;
  position: absolute;
  left: 10px;
  bottom: 15px;
  font-size: xx-small;
}
.olControlScaleLineBottom {
  border: solid 2px black;
  border-bottom: none;
  margin-top:-2px;
  text-align: center;
}
.olControlScaleLineTop {
  border: solid 2px black;
  border-top: none;
  text-align: center;
}

#communes_div2 > span > a {
  /*border : 1px solid #000000;*/
  width: 272px;
  /*height: 31px;*/
  overflow:hidden;
  float: right;
  margin: -9px 0px 0px 0px;
  color: #000000;
  background: url(../ressource/images/select_arrow.png) no-repeat;
  background-position: right 9px;
}

#pre_commune_div > img {
	  width: 27px;
	  height: 27px;
	}

.olHandlerBoxZoomBox {
  border: 2px solid red;
  position: absolute;
  background-color: white;
  opacity: 0.50;
  font-size: 1px;
  filter: alpha(opacity=50);
}

#popup_liens_utiles {
	background-color: white;
	height:64px;
}

.ui-selectmenu-menu { top: 127px !important; right: 19px !important; background: #FFFFFF; border : 1px solid #000000;}
.ui-selectmenu-menu > ul { width: 272px !important;}
.ui-selectmenu-menu > ul > li > a { color: #000000;}

/* Selectmenu
----------------------------------*/
.ui-selectmenu { display: block; display: inline-block; position: relative; height: 2.2em; vertical-align: middle; text-decoration: none; overflow: hidden; zoom: 1; }
/*.ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 50%; }*/
.ui-selectmenu-menu { padding:0; margin:0; position:absolute; top: 0; left: auto !important; display: none; z-index: 1005;} /* z-index: 1005 to make selectmenu work with dialog */
.ui-selectmenu-menu  ul { padding:0; margin:0; list-style:none; position: relative; overflow: auto; overflow-y: auto ; overflow-x: hidden; -webkit-overflow-scrolling: touch;} 
.ui-selectmenu-open { display: block; }
.ui-selectmenu-menu-popup { margin-top: 20px; }
.ui-selectmenu-menu li { padding:0; margin:0; display: block; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; border-right-width: 0 !important; border-left-width: 0 !important; font-weight: normal !important; }
.ui-selectmenu-menu li a,.ui-selectmenu-status { line-height: 1.4em; display: block; padding: .555em 2.1em .405em 2em; outline:none; text-decoration:none; font-size: 16px; }
.ui-selectmenu-menu li.ui-state-disabled a, .ui-state-disabled { cursor: default; }
.ui-selectmenu-menu li.ui-selectmenu-hasIcon a,
.ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; }
.ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; }
.ui-selectmenu-status { line-height: 1.4em; }
.ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; }
.ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; }
.ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; }
/* for optgroups */
.ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em; }
.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display:block; padding: .6em .5em 0; font-weight: bold; }
.ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; }
/* IE6 workaround (dotted transparent borders) */
* html .ui-selectmenu-menu li { border-color: pink; filter:chroma(color=pink); width:100%; }
* html .ui-selectmenu-menu li a { position: relative }
/* IE7 workaround (opacity disabled) */
*+html .ui-state-disabled, *+html .ui-state-disabled a { color: silver; }

#messageAlerte {
	overflow:hidden;
	font-size:18px;
	padding:0px;
    text-align:center;
}

.deroulant {
	animation: Deroulant 15s infinite linear;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	display: inline-block; 
}

.clignotant {
	animation: Clignotant 5s infinite;
}

@keyframes Clignotant{
	0%{opacity: 0;}
	10%{opacity: 1;}
	90%{opacity: 1;}
	100%{opacity: 0;}
}

@keyframes Deroulant{
	0% {
		transform: translate3d(0,0,0);
	}
	10% {
		transform: translate3d(0,0,0);
	}
	100% {
		transform: translate3d(-100%,0,0);
	}
}

#popup_degel {
	position: absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}

#span_degel {
	font-size: 16px;
	margin-right: 4px;
	border: 3px solid rgb(28, 99, 140);
	border-radius: 5px;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
	color: var(--primary_color);
	background-color: white;
	padding: 5px;
	box-shadow: 2px 2px 0px rgb(14,50,70);
}

#span_degel:hover {
	box-shadow:none;
}

.imgUrgence {
	height: 60px;
}

.ol-attribution{text-align:right;bottom:.5em;max-width:calc(100% - 1.3em);position:absolute}
.ol-attribution ul{margin:0 0 3px 0;padding:0 .5em;font-size:.7em;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}
.ol-attribution li{display:inline;list-style:none;line-height:inherit}
.ol-attribution li:not(:last-child):after{content:" "}
.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}
.ol-attribution button,
.ol-attribution ul{display:inline-block}
.ol-attribution.ol-collapsed ul{display:none}
.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}
.ol-attribution.ol-uncollapsible{bottom:0;border-radius:4px 0 0;height:1.1em;line-height:1em}
.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}
.ol-attribution.ol-uncollapsible button{display:none}


#page {
	display: grid;
	width: 100%;
	height: 100%;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	grid-template: "onglets bandeauhaut" 90px
	  "onglets  carte" 1fr
	  / 380px 4fr; 
  }

.textWithBorder {
    margin-left:4px;
    margin-right:4px;
    padding-left:3px;
    border: 3px solid;
    border-color: var(--primary_text_color);
    border-radius: 5px;
}

#pageonglets {
	display: grid;
	width: 100%;
	height: 100%;
	grid-column-gap: 0px;s
	grid-row-gap: 0px;
	column-gap: 0px;
	grid-gap: 0px;
	grid-template: "vide logo" 90px "listeonglets  contenuonglet" 8fr / 62px 318px
  /* grid-template: "vide logo" 90px */
	  /* "listeonglets  contenuonglet" 8fr */
	  /* "listeonglets  urgence" 2fr */
	  /* "videbas bas" 40px */
	  /* / 62px 318px; */
}
  
.textUrgence {
	font-size:10px;
}
.sousTextUrgence {
	font-size:12px;
	text-align:center;
	vertical-align:top;
}

#liens_utiles {
	overflow:hidden;
	height:40px;
	bottom:0px;
	left:0px;
	position:absolute;
	width:380px;
	background-color: var(--primary_color);
}

.imgLien {
	height:60px;
	margin:0px;
	border:0px;
	padding:2px 0px 2px 3px;
	border-image-width:0px;"
}

#imgLogo {
	width:318px;
}

.imgOnglet {
	width:60px;
}

.imgLegende {
	width:50px;
}

.textLegende {
	font-size: 18px;
	line-height:0px;
}

#titre_liens_utiles {
	font-size: 18px;
	height:23px;
	line-height:23px;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    color:var(--primary_text_color);
}

#contenu_evenements {
    color:var(--primary_text_color);
    background-color:var(--primary_color);
    width: 100%; 
    height: 100%; 
    position:relative;
}
	  
contenuonglet {
	background-color: white;
	grid-area: contenuonglet;
	padding: 0px;
	font-size:18px;
}

.fontSize18 {
	font-size: 18px;
}

.fontSize28 {
	font-size: 28px;
}

.paddingForm {
	padding-top:10px;
	padding-bottom:30px;
	padding-left:10px;
}

#pagehaut {
	display: grid;
	width: 100%;
	height: 100%;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	column-gap: 0px;
	grid-gap: 0px;
	grid-template: "textehaut date_maj" 90px
	  / 1fr 250px;
}

#voirPlus {
	position: absolute;
	top: 30px;
	z-index: 1500;
	right: 250px;
	font-size: 24px;
	text-align: center;
	width: 30px;
	height: 30px;
	background: white;
	border-radius: 60px / 60px;
	border-color:rgb(61,169,72);
	border:3px solid;
	line-height:1.2;			 
}

#imgDepartement {
	height:60px;
	margin:0px;
	border:0px;
	padding:2px 3px 2px 5px;
	border-image-width:0px;
	position: absolute;
	right: 0;
	bottom: 0;
}

#popupSynthese {
	position: absolute;
	top: 15%;
	left: 12.5%;
	width: 75%;
	height: auto;
	border-color: black;
	background-color: white;
	z-index: 2000;
	border-style: solid;
	padding: 10px;
}

#modalPopupSynthese {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 2000;
}

#communes-button {
	width: 272px;
}

#legende table {
	border-collapse: collapse;
}

#legende td {
	padding: 0; 
	margin: 0;
}

#div_evt_haut {
	position: absolute;
	top:0px;
	background-color: var(--primary_color);
}

#div_evt_bas {
	position: absolute;
	top:200px;
	background-color: var(--primary_color);
}

.checkboxes label {
  display: inline-block;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

@media only screen and (max-height: 800px) {
	
	/* #content { */
	  /* height: 88.75vh; */
	/* } */
	
	.imgUrgence {
		height: 7.5vh;
	}
	
	#page {
        grid-template: "onglets bandeauhaut" 11.25vh
          "onglets  carte" 1fr
          / 47.5vh 4fr; 
    }
	
	#pageonglets {
	grid-template: "vide logo" 11.25vh
	  "listeonglets  contenuonglet" 8fr
	  "listeonglets  urgence" 2fr
	  "videbas bas" 40px
	  / 7.75vh 39.75vh;
	}
	
	#liens_utiles {
		width:47.5vh;
	}
	
	.imgLien {
		height: 7.5vh;
	}
	
	#imgLogo {
		width:39.75vh;
	}
	
	.imgOnglet {
		width: 7.5vh;
	}
	
	.imgLegende {
		width:5vh;
	}
	
	contenuonglet {
		font-size: 2.25vh;
		overflow-y:auto;
		scrollbar-width: thin;
	}
	
	.textUrgence {
		font-size:1.25vh;
	}
	.sousTextUrgence {
		font-size:1.5vh;
	}
	
	.textLegende {
		font-size: 2.25vh;
	}

	#titre_liens_utiles {
		font-size: 2.25vh;
	}

	.fontSize18 {
		font-size: 2.25vh;
	}

	.fontSize28 {
		font-size: 3.5vh;
	}
	
	.paddingForm {
		padding-top:1.25vh;
		padding-bottom:3.75vh;
		padding-left:1.25vh;
	}
	
	#ovale {
	  width: 3.75vh;
	  height: 1.25vh;
	  border-radius: 7.5vh / 5vh;
	  background: rgb(61,169,72);
	  border-color:white;
	  border: 0.375vh solid white;
	}
	
	#pagehaut {
	grid-template: "textehaut date_maj" 11.25vh
	  / 1fr 31.25vh;
	}
	
	#voirPlus {
		top: 3.75vh;
		right: 31.25vh;
		font-size: 3vh;
		width: 3.75vh;
		height: 3.75vh;
		border-radius: 7.5vh / 7.5vh;
		border-color:rgb(61,169,72);
		border:0.375vh solid;
	}
	
	#messageAlerte {
		font-size: 2.25vh;
		padding:2.5vh
	}
	
	#date_maj {
		padding: 2.5vh 10px 2.5vh 10px;
		height: 2.75vh;
		font-size: 2vh;
	}
	
	#imgDepartement {
		height:7.5vh;
	}
	
	.zoomPanel {
	  background-size: 11.875vh 31vh;
	  top: 12.75vh;
	  left: 1.5vh;
	  width: 11.875vh;
	  height: 31vh;
	}
	
	.buttonZoomIn {
	  background-size: 3.25vh 3.25vh;
	  height: 3.25vh;
	  width: 3.25vh;
	  top: 6.25vh;
	  left: 1.875vh;
	}

	.buttonZoomOut {
	  background-size: 3.25vh 3.25vh;
	  height: 3.25vh;
	  width: 3.25vh;
	  top: 18.75vh;
	  left: 1.875vh;
	}

	.buttonZoomBox {
	  background-size: 5.125vh 5vh;
	  height: 5vh;
	  width: 5.125vh;
	  top: 23.75vh;
	  left: 3.75vh;
	}

	.sliderZoom {
	  top: 5vh;
	  left: 6.875vh;
	  height: 14vh !important;
	  margin-top: 1.875vh;
	  width: 1.875vh !important;
	}

	.sliderZoom > a {
	  width: 1.625vh !important;
	  height: 2vh !important;
	  margin-bottom: -1vh !important;
	  margin-left: 0.75vh !important;
	}

	.buttonZoomBoxActif {
	  background-size: 5.125vh 5vh;
	  height: 5vh;
	  width: 5.125vh;
	  top: 23.75vh;
	  left: 3.75vh;
	}
	
	#communes_div2 {
	  height: 3.5vh;
	  width: 34.875vh;
	  top: 12.75vh;
	  right: 1.5vh;
	}

	#pre_commune_div {
	  width: 4vh;
	  top: 12.875vh;
	  right: 36.375vh;
	}
	
	#pre_commune_div > img {
	  width: 3.375vh;
	  height: 3.375vh;
	}
	
	#communes_div2 > span > a {
	  width: 34vh;
	  margin: -1vh 0px 0px 0px;
	  background-size: 3.5vh 3.5vh;
	  background-position: right 1vh;
	}
	
	body {
		font-size: 2.25vh;
	}
	
	#communes-button {
		width: 34vh !important;
	}
	
	.ui-selectmenu-menu { top: 15.875vh !important; right: 2.375vh !important; background: #FFFFFF; border : 1px solid #000000;}
	.ui-selectmenu-menu > ul { width: 34vh !important;}
	.ui-selectmenu-menu > ul > li > a { color: #000000;}

	/* Selectmenu
	----------------------------------*/
	.ui-selectmenu { display: block; display: inline-block; position: relative; height: 2.2em; vertical-align: middle; text-decoration: none; overflow: hidden; zoom: 1; }
	/*.ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 50%; }*/
	.ui-selectmenu-menu { padding:0; margin:0; position:absolute; top: 0; left: auto !important; display: none; z-index: 1005;} /* z-index: 1005 to make selectmenu work with dialog */
	.ui-selectmenu-menu  ul { padding:0; margin:0; list-style:none; position: relative; overflow: auto; overflow-y: auto ; overflow-x: hidden; -webkit-overflow-scrolling: touch;} 
	.ui-selectmenu-open { display: block; }
	.ui-selectmenu-menu-popup { margin-top: 20px; }
	.ui-selectmenu-menu li { padding:0; margin:0; display: block; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; border-right-width: 0 !important; border-left-width: 0 !important; font-weight: normal !important; }
	.ui-selectmenu-menu li a,.ui-selectmenu-status { line-height: 1.4em; display: block; padding: 1vh 3.75vh .0.75vh 3.6vh; outline:none; text-decoration:none; }
	.ui-selectmenu-menu li.ui-state-disabled a, .ui-state-disabled { cursor: default; }
	.ui-selectmenu-menu li.ui-selectmenu-hasIcon a,
	.ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 2.5vh; position: relative; margin-left: 0.625vh; }
	.ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; }
	.ui-selectmenu-status { line-height: 1.4em; }
	.ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; }
	.ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; }
	.ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; }
	/* for optgroups */
	.ui-selectmenu-menu .ui-selectmenu-group { font-size: 2.25vh; }
	.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display:block; padding: .6em .5em 0; font-weight: bold; }
	.ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; }
	/* IE6 workaround (dotted transparent borders) */
	* html .ui-selectmenu-menu li { border-color: pink; filter:chroma(color=pink); width:100%; }
	* html .ui-selectmenu-menu li a { position: relative }
	/* IE7 workaround (opacity disabled) */
	*+html .ui-state-disabled, *+html .ui-state-disabled a { color: silver; }
	
	.popup {
	  border: 0.25vh solid #FF0000;
	  line-height: 1.75vh;
	}

	.popup_closeBox {
	  background-size: 2.875vh 2.75vh;
	  width: 2.875vh;
	  height: 2.75vh;
	}

	.popup_titre {
	  font-size: 1.75vh;
	  line-height: 3vh;
	  border-bottom: 0.125vh dotted;
	  margin: 1.25vh 2.5vh 0.625vh 0px;
	}

	.popup_content {
	  font-size: 1.75vh;
	  margin-bottom: 0.625vh;
	}

	.popup_content_hide {
	  font-size: 1.75vh;
	}

	.popup_ul {
	  margin: 0px;
	  padding: 0.625vh;
	}
	
	#popup_barreau_pointermove {
		min-width: 25vh !important;
	}
	
	#div_evt_haut {
		position: initial;
		top: initial;
	}

	#div_evt_bas {
		position: initial;
		bottom:initial;
	}

	input[type=checkbox]
	{
		transform: scale(0.75);
	}
}

@media only screen and (max-height: 640px) {
	
	#pagehaut {
		grid-template: "textehaut date_maj" 11.25vh
		/ 1fr 31.25vh;
	}
	
	
	.zoomPanel {
	  background-size: 76px 198.4px;
	  width: 76px;
	  height: 198.4px;
	}
	
	.buttonZoomIn {
	  background-size: 20.8px 20.8px;
	  height: 20.8px;
	  width: 20.8px;
	  top: 40px;
	  left: 12px;
	}

	.buttonZoomOut {
	  background-size: 20.8px 20.8px;
	  height: 20.8px;
	  width: 20.8px;
	  top: 120px;
	  left: 12px;
	}

	.buttonZoomBox {
	  background-size: 32.8px 32px;
	  height: 32px;
	  width: 32.8px;
	  top: 152px;
	  left: 24px;
	}

	.sliderZoom {
	  top: 32px;
	  left: 44px;
	  height: 89.6px !important;
	  margin-top: 12px;
	  width: 12px !important;
	}

	.sliderZoom > a {
	  width: 10.4px !important;
	  height: 12.8px !important;
	  margin-bottom: -6.4px !important;
	  margin-left: 4.8px !important;
	}

	.buttonZoomBoxActif {
	  background-size: 32.8px 32px;
	  height: 32px;
	  width: 32.8px;
	  top: 152px;
	  left: 24px;
	}
	
	input[type=checkbox]
	{
		transform: scale(0.75);
	}
}

@media only screen and (max-height: 350px) {
	.zoomPanel {
	  display:none;
	}
	
	input[type=checkbox]
	{
		transform: scale(0.6);
	}
}

@media only screen and (max-width: 800px) and (orientation : portrait) {
	body {
		overflow-y: hidden;
		overflow-x: auto;
		min-width: 800px;
	}
}