html, body {
	font-family:	'OpenSans', helvetica, verdana;
}
#titrageEchelle, #titrageZone, #titrageGigapixels, #titrageTaille {
	display:		none;
	pointer-events: none;
	z-index:		9;
	color:			white;
}

#titrageEchelle, #zoom {
  	font-size:		18px;
}
#titrageEchelle {
	font-weight:	bold;
	display:		none;
	position:		absolute;
	bottom:			55px;
	right:			10px;
}
#titrageEchelle div {
	width:			100%;
	margin-left:	auto;
	text-align: 	center;
}
#zoom {
	display:		none;
	color:			white;
	position:		absolute;
	bottom:			25px;
	right:			10px;
	text-align: 	right;
}
#zoom>div {
	display:		inline-block;
}
#zoom .smaller, #zoom .label {
  	font-size:		70%;
}
#zoom .valeur {
	font-weight:	bold;
}
#zoom .label {
	margin-right: 	5px;
}
#titrageEchelle #scale {
	width:			100%;
	height:			5px;
	border-right:	1px solid white;
	border-left:	1px solid white;
	border-bottom:	2px solid white;
}

#titrageGigapixels, #titrageTaille {
	position:		absolute;
	text-align: 	right;
	line-height:	120%;
  	font-size:		70%;
	right:			10px;
}
#titrageGigapixels {
	bottom:			10px;
}
#titrageTaille {
	top:			10px;
}


#titrageZone {
	position:		absolute;
	width:			100px;
	height:			100px;
	top:			60px;
	right:			10px;
	border-radius:	0.25vw;
	background:		white;
}
#titrageZone #zone, #titrageZone #zoneBackground {
	position:		absolute;
	left:			0;
	top:			0;
	width:			100%;
	height:			100%;
	background:		url("") no-repeat center center/contain;
}
#titrageZone #zoneBackground {
	opacity:		0.3;
}
#zoneBackground {
	filter:			saturate(0);
}
#titrageZone #zone {
	border-radius:	0.2vw;
}