/*
*	Balises standards
*/
html, body {
	width: 			        100%;
	height: 		        100%;
	color:				    black;
	background:				white;
	margin:					10px;
}
html, body, input, label, select {
    font-family: 			'OpenSans';
    font-weight:			400;
    font-style: 			normal;
	font-size:				13px;
	line-height:			350%;
}


/* Containers */
#drawing {
	position:				relative;
	margin-top:				10px;
}





/* Gigapixel */
#gigapixel {
	position:				absolute;
	top:					0;
	left:					0;
	width:  				90vw;
	height: 				calc(90vw / 2 + 1px); /* +1 sinon bug de ratio avec l'échelle */
	overflow:				hidden;
    background-size:     	cover;
    background-repeat:   	no-repeat;
    background-position: 	center center;
}
#gigapixelPreview {
	display:	none;
}
#titrageEchelle {
	display:		none;
	position:		absolute;
	left:			0px;
	top:			30px;
	width:			100px;
	height:			15px;
	line-height:	100%;
	color:			white;
	font-size:		14px;
}
#titrageEchelle div {
	width:			100%;
	height:			100%;
	margin-left:	auto;
	text-align:		center;
}
#titrageEchelle #scale {
	width:			100%;
	height:			4px;
	border-right:	1px solid #fff;
	border-left:	1px solid #fff;
	border-bottom:	2px solid #fff;
	/*background: 	linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(255,255,255,.05) 50%);
	box-shadow:		0 0 0 .1vh #FFF;*/
}


/* Canvas */
#canvas {
	position:		absolute;
	top:			0;
	left:			0;
	pointer-events: none;
}







/* Variables */
sub {
	vertical-align: 		sub;
	font-size: 				smaller;
}
.variable {
	margin-bottom:			10px;
	line-height:			120%;
}
.variable>div {
	display:				inline-block;
	padding-right:			7px;
}
.variable .name {
	width:					220px;
	text-align:				right;
}
.variable .text {
	vertical-align:			top;
}
.gray {
	color:					lightgray;
}
h1 {
    font-family: 			'OpenSans';
    font-weight:			200;
	font-size:				48px;
	margin-bottom:			24px;
}
h2 {
    font-family: 			'OpenSans';
    font-weight:			600;
	font-size:				20px;
	margin-bottom:			12px;
}
h3 {
    font-family: 			'OpenSans';
    font-weight:			600;
	font-size:				14px;
	margin-bottom:			12px;
}
.menu {
	line-height:			200%;
}
.button {
	background:				#F93143;
	color:					white;
	text-transform:			uppercase;
	font-weight:			400;
	padding:				5px 10px 5px 10px;
	display:				inline-block;
	border-radius:			5px;
	border:					1px solid transparent;
	margin-top:				5px;
	cursor:					pointer;
}
.button:hover {
	color:					white;
	background:				#246DAC;
}
.slider {
	display:				inline-block;
	width:					300px;
	margin:					0px 10px 0px 10px;
	vertical-align:			-3px;
}
.noUi-tooltip {
	font-size:				11px;
	line-height:			100%;
}
.noUi-horizontal .noUi-handle {
	width:					14px;
}
html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
	right:					-7px;
}
.noUi-handle:after, .noUi-handle:before {
	display:				none;
}
#datePicker, #earthSearch {
	width:					230px;
	padding-left:			8px;
	border-radius:			3px;
	line-height:			200%;
}
#showSun .noUi-connect {
	background: 			#000000;
}

/* Maps */
#ephemeride, #panoramaTitle {
	position:				absolute;
	top:					0;
	left:					0;
	padding:				10px;
}
#ephemeride {
	width:					450px;
	height:					340px;
	line-height:			120%;
}
#ephemeride .variable .name {
	font-weight:			400;
}
#ephemeride .variable .name .gray {
	color:					black !important;
	font-weight:			700;
}
#ephemeride .past {
	opacity:				0.2;
}
#ephemeride .current, #ephemeride .variable.current .name .gray {
	color:					#00BA98 !important;
}