html {height:100%;}
body {font-family:"Roboto", Arial,sans-serif;font-weight:300;background-color:#FAFAFA;}

body, select, input, textarea {color: #333;}

a {color: #03f;}
a:hover {color: #69f;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

/* select */
select {
	font-family:"Roboto", Arial,sans-serif;
	font-weight:400;
	font-size:0.9rem;
	color: #666;
	border:none;
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	-o-border-radius:0px;
	border-radius:0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;	
	padding:0.2rem 2rem 0.2rem 0.5rem;
	background:rgba(169, 192, 239, 0.3) url("../img/sageto.png") 97% 50% no-repeat;
}

input {
	font-family:"Roboto Condensed", Arial,sans-serif;
	font-weight:300;
	font-size:0.8rem;
	margin-left:0.5em;
	color: #4882E0;
	border:1px solid #4882E0;
	text-transform:uppercase;
	background-color:#FFF;
	}
div.wrapper {
	width:75%; width:75vw;
	max-width:1400px;
	margin:1.5% auto 0.5% auto;
	margin:1.5vw auto 0.5vw auto;
	background-color:#FFF;
	-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.35);
	-o-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.35);
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.35);
	padding:1.5%; padding:1.5vw;
	overflow:hidden;
}
footer {text-align:center;font-weight:300;color:600;}
#script1 {display:block;}
#script2 {display:none;}

h1 {text-align:center;font-weight:300;font-size:2.5rem;margin-bottom:3%;color:#999;}
#script2 {display:none;}
article p {
	font-weight:300;
	font-size:small;
	clear:left;
}
#mapo {
	width:50%;
	float:left;
	z-index:2;
}
#map {        
  max-width: 100%;
  max-height: 100%;
}
#map path {
  fill:#86AAE0;
  stroke:#FFFFFF;
  stroke-width:0.6;
  transition: fill 0.2s, stroke 0.3s;
}
#map path:hover,
#map path:active {
  fill: green;
  stroke: green;
}
#map .separator {
  stroke: #ccc;
  fill: none;
  stroke-width:1.5;
}
#map .separator:hover {
  stroke: #ccc;
  fill: none;
}
.listo {margin:0.5rem 0;}
    
#rezulto {
	width: 40%;
	float:left;
	margin-left:8%;
	background-color:#edf9e1;
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);
	-o-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.35);
	max-height:700px;
	padding:1%;
	overflow-y: auto;
	z-index:1;
}
.liste-local {margin-top:1rem;}
.liste-local h1 {
	font-weight:300;
	font-size:2rem;
	padding-bottom:1rem;
	text-align:left;
	color:#999;
}
.liste-local h2 {
	font-weight:300;
	font-size:1.5rem;
	padding-bottom:1rem;
	color:#999;
	line-height:1.7rem;
}
.liste-local {font-size:0.8rem;font-weight:300;}
.liste-local li strong {font-size:0.95rem;font-weight:500;margin-bottom:0.5rem;}

a.btn_modifier,
a.btn_ajouter {
	display:inline-block;
	font-family: "Roboto Condensed", Arial,sans-serif;
	color:#006600;
	font-size:.95rem;
	text-decoration:none;
	padding:0.1rem 0.5em;
	margin-top:0.3rem;
	text-transform:uppercase;
}
a.btn_modifier {
	border:1px solid #006600;
	}
a.btn_ajouter::before {content: "> ";}
a.btn_modifier:hover,
a.btn_ajouter:hover {
	color:#FFF;
	background-color:#006600;
}
a.btn_modifier:active,
a.btn_ajouter:active {
	background-color:#66CC66;
}
a.btn_modifier:active {
	border-color:#66CC66;
}

/* Media queries
-------------------------------------------------------------------------------*/

@media screen and (max-device-width: 1024px) {
	div.wrapper {width:100%;margin:0 auto;}	
	div#rezulto {background-color:transparent;border:none;-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;box-shadow:none;max-height:auto;overflow-y:auto;}	
}
@media screen and (max-device-width: 900px) {
	div.wrapper {width:100%;padding:0.5rem;}	
	div#mapo {float:none;width:100%;}
	div#rezulto {float:none;width:100%;background-color:transparent;border:none;height:auto;overflow:hidden;-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;box-shadow:none;max-height:auto;}	
	#script1 {display:none;}
	#script2 {display:block;}
}
@media screen and (max-device-width: 600px) {
	h1 {font-size:1.5rem;margin-bottom:0.5rem;}
	#map {width:90%;height:auto;margin: 0 auto;padding:0;}
	#rezulto {margin:0;}
}