/* ----------------- Styles UCLIP CONTACT ITC ----------------- */
	body {
		width: 100%;
		margin: 0;
		background-color: white;
		}
	#central {
		position: relative;
		margin: 0 auto;
		width: 1024px;
		background-color: whitesmoke;
		}
	a {
		color: #E64A19;
		text-decoration: none;
		}
	a:hover {
		color: #FB8C00;
		}
	h2 {
		color: orange;
		}
	p {
		font-size: 1.4em;
		color: grey;
		}
	.chapitre { /* margin-top: 40px; */
		width: 500px;
		font-size: 2em;
		margin-left: 50px;
		margin-top: 30px;
		padding-left: 15px;
		padding-bottom: 5px;
		border-left: 2px solid #DE3163;
		border-bottom: 2px solid #DE3163;
		background-color: white;
		border-radius: 0 14px;
		}
	.far {
		margin-left: 70px;
		margin-top: 40px;
		font-size: 1.8em;
	}
	.delta {
		display: block;
		width: 250px;
		color: #FB8C00;
		}
	#loupe_1, #loupe_2, #loupe_3, #loupe_4, #loupe_5 {
		position: absolute;
		bottom: -50px;
		left: 30px;
		width: 40px;
		padding: 15px 25px 5px 10px;
		}
/* ----------------- CLASSES ----------------- */
	.whitehall {
		width: 840px;
		margin-top: 0;
		margin-left: 80px;
		padding: 20px;
		text-align: left;
		background-color: white;
		border-radius: 24px 0 24px 0;
		border: 1px solid lightyellow;
		}
	.hypertexte {
		color: #A10684;
		text-decoration: underline;
		}
	.primo {
		color: #B22222; /* rouge tuile */
		font-size: 1.1em;
		font-weight: bold;
		}
	.surligne {
		color: #B22222; /* rouge tuile */
		font-weight: bold;
		}
	.centrimage {
		display: block;
		margin-left: auto;
		margin-right: auto;
		}
	.legende {
		margin-left: 80px;
		padding: 10px;
		font-size: 1.2em;
		text-align: center;
		color: grey;
		}
	.legende:hover {
		cursor: pointer;
		}
	.sous_titre {
		margin-left: 120px;
		font-size: 1.4em;
		font-weight: bold;
		font-style: italic;
		text-decoration: none;
		color: #DE3163;
		}
	.lien_delta {
		display: block;
		width: 500px;
		margin-left: 75px;
		margin-bottom: 10px;
		padding: 8px 8px 8px 32px;
		font-size: 1.1em;
		color: grey;
		}
	.zoom_delta {
		width: 500px;
		margin-left: 75px;
		margin-bottom: 10px;
		padding: 8px 8px 8px 32px;
		font-weight: normal;
		font-size: 1.1em;
		color: grey;
		}
	.sous_titre:hover, .lien_delta:hover {
		color: red;
		}
	.zoom_delta:hover {
		color: red;
		cursor: pointer;
		}
	.document {
		font-size: 1.6em;
		margin-left: 30px;
		}
	.puce {
		font-size: 2.2em;
		color: #F0C300;
		}
	.puce_pdf {
		color: orange;
		}
	.text_pdf {
		font-size: 0.9em;
		padding-right: 25px;
		color: #F0C300;
		}
	.text_pdf:hover {
		color: purple;
		}
	.lien_dossier {
		font-size: 1.6em;
		margin-left: 30px;
		padding: 15px 5px;
		color: goldenrod; /* Jaune doré */
		}
	#sankei {
		margin-top: 70px;
		opacity: 0.2;
		z-index: 20;
		}
	#token {
		position: absolute;
		top: 70px;
		left: 120px;
		}
	#hypercross {
		position: absolute;
		top: 80px;
		left: 50px;
		font-size: 3.3em;
		font-weight: bold;
		color: silver;
		padding: 5px 20px;
		opacity: 0.8;
		display: none;
		}
	#move_down {
		position: absolute;
		top: 70px;
		right: 106px;
		width: 50px;
		padding: 20px;
		opacity: 0.8;
		}
	#move_down:hover, #hypercross:hover {
		cursor: pointer;
		opacity: 1;
		}
	#south {
		min-height: 400px;
		}
	#iss {
		height: 0;
		}
/* ---------------- Composition ---------------- */
	.hublot {
		margin-left: 30px;
		margin-right: 30px;
		border-radius: 14px;
		float: left;
		}
	.hublot:hover {
		cursor: pointer;
		}
/* ----------------- Contrôles ----------------- */
	#ligne, #boden {
		position: relative;
		}
	.top_zen {
		position: absolute;
		top: 10px;
		left: 740px;
		width: 40px;
		padding: 25px;
		display: none;
		}
	#top_down {
		position: absolute;
		top: 10px;
		left: 840px;
		width: 50px;
		padding: 20px;
		}
	#top_up {
		position: fixed;
		bottom: 150px;
		right: 5px;
		width: 50px;
		padding: 25px;
		z-index: 20;
		}
	#flop {
		position: absolute;
		top: 10px;
		left: 935px;
		width: 90px;
		height: 90px;
		background-color: whitesmoke;
		z-index: 30;
		}
	#top_0 {
		position: absolute;
		top: 10px;
		left: 935px;
		width: 50px;
		padding: 20px;
		z-index: 40;
		}
	.square {
		margin: 20px 10px 10px 0;
		padding: 10px;
		float: left;
		}
	.div_delta {
		position: relative;
		padding-top: 15px;
		}
	.focus_delta { /* Videopro : #focus_i, #focus_o, #focus_m ; Hercule : #focus_a, #focus_b ; Proxima : #focus_a, #focus_k, #focus_rho, #focus_o */
		position: absolute;
		top: -25px;
		left: 850px;
		width: 40px;
		padding: 25px;
		z-index: 20;
		}
	.top_zen:hover, .square:hover, .focus_delta:hover, .focus_screen:hover { /* .focus_clic:hover */
		cursor: pointer;
		}
	.flap {
		position: absolute;
		top: -90px;
		left: 930px;
		width: 90px;
		height: 90px;
		background-color: whitesmoke;
		z-index: 30;
		}
	.top_sky { /* Videopro : #top_1, #top_2, #top_5 ; Hercule : #top_sam, #top_biblio ; Proxima : #top_proxima, #top_alpha, #top_khi, #top_omega */
		position: absolute;
		top: -85px;
		right: 0;
		width: 50px;
		padding: 25px;
		z-index: 40;
		}
	.top_lift { /* Proxima : #top_rho */
		position: absolute;
		top: -350px;
		right: 0;
		width: 50px;
		padding: 25px;
		z-index: 40;
		}
	.top_delta { /* Videopro : #top_1, #top_2, #top_5 ; Hercule : #top_sam, #top_biblio ; Proxima : #top_proxima, #top_alpha, #top_khi, #top_omega */
		position: absolute;
		top: -80px;
		left: 830px;
		width: 50px;
		padding: 20px;
		}
	.top_collection {
		position: absolute;
		top: 10px;
		left: 840px;
		width: 50px;
		padding: 20px;
		}
	.top_rho1 {
		position: absolute;
		top: -90px;
		left: 910px;
		width: 50px;
		padding: 30px;
		border: 1px solid darkred;
		}
	.top_rho2 {
		position: absolute;
		top: -85px;
		left: 840px;
		width: 50px;
		padding: 25px;
		}
	#zen_left1 {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 40px;
		padding: 40px 100px;
		border: 1px solid white;
		}	
	#zen_right1 {
		position: absolute;
		bottom: 0;
		left: 780px;
		width: 40px;
		padding: 40px 100px;
		border: 1px solid white;
		}
	#zen_left {
		position: absolute;
		top: 120px;
		left: 100px;
		width: 40px;
		padding: 40px 50px;
		}	
	#zen_right {
		position: absolute;
		top: 120px;
		left: 780px;
		width: 40px;
		padding: 40px 50px;
		}
	#zen_left:hover, #zen_right:hover {
		cursor: pointer;
		}
	.titre_collection {
		padding-left: 20px;
		font-size: 2.2em;
		color: orange;
		}
	#icone_loupe_absolute {
		position: absolute;
		bottom: 0;
		left: 930px;
		width: 40px;
		padding: 25px;
		}
	.icone_loupe {
		position: fixed;
		bottom: 0;
		right: 0;
		width: 40px;
		padding: 25px;
		border: none;
		z-index: 40;
		}
	.icone_loupe:hover {
		cursor: pointer;
		}
	.blue_mark { /* Bleu céleste */
		color: #007FFF;
		}
	.vide {
		position: absolute;
		bottom: 0;
		left: 5px;
		width: 30px;
		text-align: center;
		font-size: 1.8em;
		font-weight: bold;
		color: #4B0082;
		padding: 20px;
		}
	.vide:hover {
		cursor: pointer;
		}
/* ----------------- Responsive ----------------- */
	@media(orientation:portrait){
		p {
			font-size: 1.6em;
		}
		.whitehall {
			width: 820px;
		}
		.primo {
			color: white;
			background-color: #F6DC12; /* Jaune d'or */
			font-size: 1.14em;
		}
		.surligne {
			color: #F0C300; /* or passé */
			font-weight: bold;
		}
		.legende {
			padding: 15px;
			font-size: 1.5em;
		}
		.sous_titre {
			font-size: 1.6em;
		}
		#zen_left {
			position: absolute;
			top: 125px;
			left: 95px;
			width: 50px;
			}	
		#zen_right {
			position: absolute;
			top: 125px;
			left: 780px;
			width: 50px;
			}
		.chapitre {
			font-size: 2.2em;
			}
		.far {
			margin-top: 35px;
			font-size: 2em;
		}
		.focus_delta {
			position: absolute;
			top: -20px;
			left: 850px;
			width: 45px;
			}
		.top_sky {
			position: absolute;
			top: -90px;
			right: 0;
			padding: 30px;
			}
		.flap {
			position: absolute;
			top: -90px;
			left: 910px;
			width: 110px;
			height: 90px;
		}
		.top_delta {
			position: absolute;
			top: -80px;
			left: 820px;
		}
		#top_up {
			position: fixed;
			bottom: 400px;
			right: 5px;
			width: 50px;
			padding: 30px;
			z-index: 20;
		}
		.top_collection {
			position: absolute;
			top: 15px;
			left: 840px;
		}
		.united_doc {
			position: absolute;
			top: 10px;
			left: 840px;
		}
		#token {
			position: absolute;
			top: 70px;
			left: 130px;
		}
		.square {
			margin: 55px 10px 10px 0;
		}
		.cercle {
			width: 42px;
			height: 42px;
		}
		#loupe_1, #loupe_2, #loupe_3, #loupe_4, #loupe_5 {
			position: absolute;
			bottom: -60px;
			left: 30px;
		}
		.vide {
			font-size: 2.3em;
			}
		.lien_delta, .zoom_delta {
			margin-left: 80px;
			font-size: 1.3em;
		}
		.document {
			font-size: 2em;
		}
		.lien_dossier {
			font-size: 2em;
			}
		#hypercross {
			position: absolute;
			top: 120px;
			left: 45px;
			padding: 5px 25px 12px 25px;
			font-size: 3.6em;
		}
		#move_down {
			position: absolute;
			top: 110px;
			right: 112px;
		}
		#sankei {
			margin-top: 100px;
		}
		#iss {
			height: 80px;
			/*background-color: #03224C;*/
		}
	}
/* ----------------- Navigation ----------------- */
	.lift {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 60px;
		padding: 20px 30px 60px 30px;
		opacity: 0.4;
		}
	.lift:hover {
		cursor: pointer;
		opacity: 0.8;
		}
	#aufzug {
		width: 60px;
		padding: 20px 30px 60px 30px;
		border: none;
		opacity: 0.4;
		}
	#aufzug:hover {
		cursor: pointer;
		opacity: 0.8;
		}
	#zen {
		position: absolute;
		bottom: 60px;
		right: 60px;
		width: 50px;
		border: none;
		opacity: 0.8;
		}
	#zen:hover {
		opacity: 1;
		}
/* ----------------- Collection ----------------- */
	.bordure {
		margin: 10px;
		border: 6px solid white;
		}
	.route_zoom {
		margin: 10px;
		border: 6px solid white;
		box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
		-webkit-transition: box-shadow 0.1s ease;
		-moz-transition: box-shadow 0.1s ease;
		transition: box-shadow 0.1s ease;
		}
	.bord_zoom {
		margin: 10px;
		border: 12px solid white;
		box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
		-webkit-transition: box-shadow 0.1s ease;
		-moz-transition: box-shadow 0.1s ease;
		transition: box-shadow 0.1s ease;
		}
	.deep_zoom {
		border-left: 11px solid #F9EEDF;
		border-top: 11px solid floralwhite;
		border-right: 11px solid floralwhite;
		border-bottom: 11px solid #F9EEDF;
		box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
		-webkit-transition: box-shadow 0.1s ease;
		-moz-transition: box-shadow 0.1s ease;
		transition: box-shadow 0.1s ease;
		}
	.zoom_frame { /* Jaune Moyen Saturé : #F0C300 */
		display: inline-block;
		margin: 10px;
		border-left: 1px solid #F0C300;
		border-top: 1px solid silver;
		border-right: 1px solid silver;
		border-bottom: 1px solid #F0C300;
		}
/* ------------------- Clavier ------------------ */
	.div_clavier { 
		position: relative;
		height: 40px;
		background-color: silver;
		}
	.top_rho {
		position: absolute;
		top: -95px;
		right: 0;
		width: 50px;
		padding: 25px;
		border: 2px solid purple;
		}
	.zoom_gauche {
		position: absolute;
		top: -85px;
		left: 200px;
		width: 50px;
		padding: 10px;
		border: 2px solid white;
		background-color: #FEFDF0; /* Blanc d'Espagne */
		border-radius: 50px;
		}
	.zoom_centre {
		position: absolute;
		top: -85px;
		left: 465px;
		width: 50px;
		padding: 10px;
		border: 2px solid white;
		background-color: #FEFDF0;
		border-radius: 50px;
		}
	.zoom_droite {
		position: absolute;
		top: -85px;
		left: 730px;
		width: 50px;
		padding: 10px;
		border: 2px solid white;
		background-color: #FEFDF0;
		border-radius: 50px;
		}
	.reset_star {
		position: absolute;
		top: -80px;
		left: 90px;
		width: 40px;
		padding: 30px;
		z-index: 20;
		}
	.zoom_gauche:hover, .zoom_centre:hover, .zoom_droite:hover, .reset_star:hover {
		cursor: pointer;
		}
/* ----------------- dragon ----------------- */
	#div_star {
		position: relative;
		height: 400px;
		font-size: 3em;
		color: white;
		background-color: #03224C;
		}
	#clic_gauche {
		padding-left: 60px;
		padding-top: 35px;
		padding-bottom: 15px;
		width: 200px;
		}
	#vega, #leger_x1 {
		position: absolute;
		bottom: 0;
		left: 370px;
		height: 400px;
		border: none;
		display: none;
		}
	#altair {
		position: absolute;
		bottom: 0;
		left: 320px;
		height: 400px;
		border: none;
		display: none;
		}
	#kupka_x1 {
		position: absolute;
		bottom: 0;
		left: 370px;
		height: 400px;
		border: none;
		display: none;
		}
	#clic_droit {
		position: absolute;
		top: 0;
		right: 0;
		padding-left: 60px;
		padding-top: 35px;
		padding-bottom: 15px;
		width: 200px;
		}
	#clic_gauche:hover, #clic_droit:hover {
		cursor: pointer;
		}
	#dragon_z:hover, #dragon_b:hover, #dragon_p:hover, #dragon_logo:hover {
		cursor: pointer;
		}