* { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(boxsizing.htc); 
}

html {
  -webkit-text-size-adjust: none;
}

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


@font-face {
  font-family: "Recia";
  src: url("Recia-Variable.ttf")
  format("truetype-variations");
  font-weight: 1 999;
}


body {
  position:relative;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  min-width:1000px;
}

#entete {
  position:absolute;
  top:0;
  /*bottom:0;*/
  min-height:100%;
  left:0;
  z-index:1000;
  
  width: 260px;
  background:#fff;
  padding:2em;
  
  -webkit-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);  
}

#retour-au-site {
  padding:0 0 1em;
  margin:0 0 1em;      
  border-bottom:1px solid #ddd;  
}

#retour-au-site a {
  display:inline-block;
  color:#9696E8;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:bold
}

#retour-au-site a:hover {
  color:#1F3C31;  
}

.logo {
  display: block;
  /* margin: 0 auto; */
  max-width: 80%;
  margin-bottom: 40px;
  margin-top: 25px;
}

img.logo  {
  width:100%;
  height:auto;
}

#entete span.date-modification {
  display:block;
  font-style:italic;
  text-align:center;
  margin:2.5em 0;  
  font-size:0.8em;
}  

#carte { 
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:260px;
  overflow:hidden;
  
  background:#fff;
}

#carte,
#carte-conteneur {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size:13px;
}

#carte-options:after,
#info:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#carte-options {
  width: auto;
  z-index:1000;
  margin-bottom:5px;
}

#carte-options label {
  color:#000000;
  display:block;
  font-size:1.25em;
  font-weight:bold;
  margin:0 0 2em;
}

#carte-options select, 
#carte-options div.dk-select {
  width:100%;  
  margin:10px 0 0;
  font-size: 13px;
  font-weight:normal; 
}



/* CARTE */
#carte-conteneur {
  height:100%;
  position:relative;
  width: 100%;
  z-index:0;
}

#carte-canevas {
  position:absolute;
  width: 100%;
  height:100%;
  z-index:0;
}

/* INFOBULLE (tooltip) */
#infobulle {
  position:absolute;
  z-index:1000;
  padding:.5em 1em;
  background:#fff;
  background:rgba(255,255,255,0.9);
  
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);  
}

#infobulle .region {
  color:#000;
  display:block;
  font-size:12px;
  text-transform:uppercase;
  text-align:center;
  margin:0 0 3px;
}

#infobulle .region-nom {
  color:#000;
  display:block;
  font-size:15px;
  text-transform:uppercase;
  font-weight:bold; 
  text-align:center; 
}

#infobulle.campus {
  background:#b5001a;
  background:rgba(181,0,26,0.9);
}

#infobulle.campus .contenu {
  color:#fff;
  display:block;
  font-size:12px;
  text-transform:uppercase;
  font-weight:bold; 
  text-align:center;
}

#infobulle.metro {
  background:transparent;  
}

#infobulle.metro .contenu {
  color:#fff;
  display:block;
  font-size:12px;
  text-transform:uppercase;
  font-weight:bold; 
  text-align:center;
} 

#infobulle.cooperative {
  background:#005e9e;  
}

#infobulle.cooperative .contenu {
  color:#fff;
  display:block;
  font-size:12px;
  text-transform:uppercase;
  font-weight:bold; 
  text-align:center;
} 

/* MOYENNE QUEBEC */
#moyenne-quebec {
  /*
  background:url(../images/moyenne.jpg) no-repeat;
  width:252px;
  height:252px;
  margin:0 auto;
  padding:2em;
  */
}

#moyenne-quebec h2 {
  color:#000000;
  font-size:1.6em;
  font-weight:700;  
  text-align:left;
  padding:0 0 .3em;
  margin:0 0 .3em;      
  border-bottom:1px solid #ddd;    

  font-family: "Recia";
}

.rangee-taux {
  margin:0 0 1em;  
}

.rangee-taux .chiffre {
  color:#9696E8;
  float:left;
  margin:0 .5em 0 0;
  font-size:2em;
  font-weight:700;
  line-height:1.5em;  
}

.rangee-taux .texte {
  display:inline-block;
  font-size:1.2em; 
  font-weight:400;   
}


/* INFO */
#info {
  display:none;
  cursor: default;
  position: absolute;
  background: #fff;
  top:40px;
  right:40px;
  width:75%;
  max-width:800px;
  min-width:700px;
  z-index:100;
  
  overflow:hidden;
  padding:1.5em;
  
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

#info.plein-ecran {
  max-width:none;
  width:100%;
  height:100%;  
}

#info h1 {
  border-bottom:1px solid #ddd; 
  padding:0 0 .5em; 
  text-transform: uppercase;
    font-family: "Recia";
}    

#info th * { color:#9696E8; }
#info th.nom { width:30%; }
#info th.ville { width:15%; }
#info th.secteurs { width:22%; }
#info th.taux { width:16.5%; }

#table-container { 
  width:100%!important;
  float:left;
  overflow:hidden;
}

#info .bt-fermer {
  display:block;
  height:21px;
  position:absolute;
  top:3.25em;
  right:1.5em;

  background:url(../images/bt-fermer-Mauve.jpg) no-repeat right center;  
  padding:0 30px 0 0;
  color:#9696E8;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:bold;
  line-height:21px;
}

.track {
  width: 7px;
  background:url(../images/scrollbar-background.png) repeat;
  background: rgba(0, 0, 0, 0);
  margin-right: 2px;
  border-radius: 10px;
  -webkit-transition: background 250ms linear;
  transition: background 250ms linear;
  right:-10px;
}

.handle {
  width: 7px;
  background:url(../images/scrollbar-background.png) repeat;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

.gm-style .gm-style-cc span, 
.gm-style .gm-style-cc a, 
.gm-style .gm-style-mtc div {
  white-space:nowrap;
}
/* COLOC */

#carte-options .dk-select-options{
	max-height:20em;
}
#carte-options .dk-option{
	padding: 0.2em 0.5em;
}
#carte-options #dk0-combobox, #carte-options #dk1-combobox{
	padding: 0.3em 0.5em;
	background-color:#fff;
	border: 1px solid #9696E8;
}
#moyenne-quebec .rangee-taux .texte{
  font-size: 1em;
  line-height: 1em;
  padding-top: 5px;
}
#donnees-header .actionBar{
	text-align:center;
}
#donnees-footer .infoBar{
	font-size:0.9em;
}
#donnees-header .search{
	width:330px;
}

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
  color: #fff!important;
  background-color: #9696E8!important;
  border-color: #9696E8!important;

}

.pagination>li>a, .pagination>li>span {

  color: #9696E8!important;

}
/* COLOC */