/*
*	Balises standards
*/
html, body {
	color:				    white;
	background:				black;
}
html, body, * {
	cursor:					none;
}
html, body, input, label, select {
    font-family: 			'Whitney HTF';
    font-weight:			400;
    font-style: 			normal;
	font-size:				24px;
	line-height:			100%;
}
h1 {
    font-weight:			800;
	font-size:				300%;
	margin:					24px 0 24px 0;
}
h2 {
    font-weight:			700;
	font-size:				150%;
	line-height:			150%;
	margin:					12px 0 12px 0;
}
h3 {
    font-weight:			600;
	line-height:			100%;
	margin-bottom:			12px;
}
p {
	margin:					10px 0px 10px 0px;
}
sub {
	vertical-align: 		sub;
	font-size: 				smaller;
}
.gray {
	color:					lightgray;
}
.hidden {
	display:				none;
}


/* Divers */
body>div {
	z-index:				1;
	position:				absolute;
}
#font-loader, #shutter, #drawing #gigapixel, #panorama {
	top:					0;
	left:					0;
	width:					100vw;
	height:					100vh;
}
#font-loader {
	opacity:				0;
	pointer-events:			none;
}
#shutter {
	position:				fixed;
	top:					0;
	left:					0;
	width:					100vw;
	height:					100vh;
	pointer-events:			none;
	background:				black;
	z-index:				9999;
}
#clocks, #clocks .coucher, #panorama, #decompte, #reglages, #ephemeride {
	display:				none;
}


/* Panorama / clock */
#clocks, #decompte, #panorama, #variables {
	background:				black;
	box-shadow: 			0px 0px 15px 0px rgba(0,0,0,1);
	right:					35px;
}
#clocks, #decompte, #panorama {
	left:					40px;
	top:					30px;
	padding:				20px 20px 20px 20px;
	font-size:				30px;
	line-height:			130%;
	margin:					24px 0 24px 0;
}
#decompte {
    font-weight: 			700;
	font-size:				45px;
	line-height:			120%;
	text-align:				center;
}
#panorama {
	top:					calc(50vh + 100vw/4 + 30px);
	background:				black;
	width:					calc( 100vw - 120px);
	height:					calc((100vw - 120px - 100px) / 2);
	padding:				40px 20px 40px 20px;
}

/* Variables */
#variables {
	width:					375px;
	bottom:					40px;
	padding:				15px 10px 10px 10px;
}
.variable {
	text-align:				center;
}
.variable>div {
	display:				inline-block;
}
.variable>div:not(.unit) {
	padding-left:			7px;
}
.variable .name {
	text-align:				right;
}
.variable .text {
	vertical-align:			top;
}
.variable .definition {
	display:				block;
}




/* Gigapixel */
#drawing #gigapixel {
	overflow:				hidden;
    background-size:     	cover;
    background-repeat:   	no-repeat;
    background-position: 	center center;
}
#drawing #gigapixelPreview {
	display:				none;
}
#drawing #titrageZoom {
	position:				absolute;
	right:					470px;
	background:				black;
	box-shadow: 			0px 0px 15px 0px rgba(0,0,0,1);
	border:					2px solid black;
	width:					190px;
	height:					calc(190px / 2);
	bottom:					40px;
}
#drawing #titrageZoom>img {
	width:					100%;
	height:					100%;
}
#drawing #titrageZoom>div {
	position:				absolute;
	top:					0;
	left:					0;
	width:					20px;
	height:					20px;
	background:				rgba(255, 255, 0, 0.5);
	border-radius:			2px;
}

#drawing #titrageEchelle {
	display:				none;
	position:				absolute;
	left:					40px;
	height:					25px;
	color:					white;
	font-size:				24px;
	font-weight:			600;
}
#drawing #titrageEchelle div {
	width:					100%;
	height:					100%;
	margin-left:			auto;
	text-align:				center;
}
#drawing #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 */
#drawing #canvas {
	position:		absolute;
	top:			0;
	left:			0;
	pointer-events: none;
}



/* Panneau de réglages */
#reglages {
	line-height:			400%;
}
#reglages .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;
}
#reglages .button:hover {
	color:					white;
	background:				#246DAC;
}
#reglages .slider {
	display:				inline-block;
	width:					300px;
	margin:					0px 10px 0px 10px;
	vertical-align:			-3px;
}
#reglages .noUi-tooltip {
	font-size:				11px;
	line-height:			100%;
}
#reglages .noUi-horizontal .noUi-handle {
	width:					14px;
}
#reglages html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
	right:					-7px;
}
#reglages .noUi-handle:after, .noUi-handle:before {
	display:				none;
}
#reglages #datePicker, #reglages #earthSearch {
	width:					230px;
	padding-left:			8px;
	border-radius:			3px;
}
#reglages #showSun .noUi-connect {
	background: 			#000000;
}



/* Éphéméride */
#ephemeride {
}
#ephemeride .variable .name {
	font-weight:			400;
}
#ephemeride .variable .name .gray {
	color:					white !important;
	font-weight:			700;
}
#ephemeride .past {
	opacity:				0.2;
}
#ephemeride .current, #ephemeride .variable.current .name .gray {
	color:					#00BA98 !important;
}