/* ----------------- Styles UCLIP PEINTURE ----------------- */
	a {
	text-decoration: none;
		}
	#parthenon {
		width: 1024px;
		height: 65px;
		padding-bottom: 10px;
		background-color: #F9EEDF;
		}
	#logo_retour {
		position: absolute;
		top: 12px;
		left: 30px;
		width: 50px;
		padding-left: 30px;
		padding-top: 13px;
		padding-right: 30px;
		padding-bottom: 12px;
		opacity: 0.3;
		}
	h1 {
		color: purple;
		font-size: 2.5em;
		}
	#memo {
		position: absolute;
		top: 0;
		left: 300px;
		color: #DE3163;
		}
	#menu_delta {
		position: absolute;
		top: 12px;
		left: 710px;
		width: 50px;
		font-size: 3em;
		color: #DE3163;
		padding-left: 30px;
		padding-top: 10px;
		padding-right: 30px;
		padding-bottom: 10px;
		display: none;
		opacity: 0.8;
		}
	#red_square {
		position: absolute;
		top: 12px;
		left: 840px;
		padding: 10px;
		z-index: 10;
		display: none;
		}
	#unten_ikone {
		width: 50px;
		border: 1px solid #DE3163;
		border-radius: 3px;
		opacity: 0.8;
		}
	#menu_page_logo {
		position: absolute;
		top: 12px;
		left: 930px;
		font-size: 3em;
		color: #DE3163;
		padding-left: 30px;
		padding-top: 4px;
		padding-right: 30px;
		padding-bottom: 8px;
		}
	#menu_delta:hover, #red_square:hover, #menu_page_logo:hover {
		cursor: pointer;
		}
	#titre_colonne, #titre_delta {
		width: 824px;
		margin-top: 0;
		padding-left: 200px;
		padding-top: 28px;
		padding-bottom: 20px;
		border-top: 2px solid #FFE4E1;
		}
	.hercule {
		font-size: 1.8em;
		color: orange;
		}
	.menu_titre { /* Ambre */
		color: #F0C300;
		}
	.hercule:hover {
		cursor: pointer;
		color: #DE3163;
		}
	li {
		margin-bottom: 4px;
		list-style-type: square;
		}
	li a {
		display: inline-block;
		min-width: 600px;
		text-decoration: none;
		}
	li a:hover {
		color: red;
		}
	.primo {
		color: orange;
		}
	.secundo { /* Rouge tomette */
		color: #AE4A34;
		}
	.tertio { /* Ambre */
		color: #F0C300;
		}
	.quattro { /* Abricot */
		color: #E67E30;
		}
	h2 {
		color: orange;
		margin-left: 20px;
		font-size: 1.8em;
		}
	p {
		font-size: 1.2em;
		}
	p:hover, #memo:hover {
		cursor: default;
		}
	#topic {
		padding-top: 10px;
		padding-bottom: 20px;
		width: 1024px;	
		min-height: 100px;
		text-align: center;
		background-color: #F9EEDF;
		border-bottom: 2px solid #FFE4E1;
		}
	#topic img {
		border: 1px solid silver;
		margin-right: 30px;
		cursor: pointer;
		}	
/* ----------------- Autres ----------------- */
	#div_monet {
		width: 1024px;
		text-align: center;
		background-color: whitesmoke;
		display: block;
		}
	#div_monet h1 {
		margin-top: 0;
		padding-top: 20px;
		}
	#col_A, #col_B, #col_C, #col_D {
		position: relative;
		min-height: 350px;
		padding-left: 20px;
		padding-top: 10px;
		padding-bottom: 20px;
		display: none;
		}
	#col_A img, #col_B img, #col_C img, #col_D img {
		border: 1px solid silver;
		}
	#silver_A, #silver_B, #silver_C, #silver_D {
		position: absolute;
		top: 10px;
		left: 860px;
		padding-left: 23px;
		padding-top: 20px;
		padding-right: 25px;
		width: 55px;
		opacity: 0.8;
		}
	.lift_up {
		position: absolute;
		bottom: 10px;
		left: 860px;
		padding-left: 23px;
		padding-top: 20px;
		padding-right: 25px;
		width: 55px;
		opacity: 0.8;
		}
	.diode {
		position: absolute;
		bottom: 10px;
		left: -60px;
		padding-left: 23px;
		padding-top: 20px;
		padding-right: 25px;
		width: 55px;
		opacity: 0.8;
		border: none;
		}
	.diode:hover {
		cursor: pointer;
		}
	#quattro {
		width: 1024px;	
		text-align: left;
		font-family: "Century Gothic",sans-serif;
		color: grey;
		background-color: whitesmoke;
		}
	#quattro img {
		margin-left: 60px;
		margin-right: 30px;
		margin-bottom: 30px;
		float: left;
		}
	#quattro p {
		width: 420px;
		margin-top: 0;
		margin-left: 30px;
		padding: 20px;
		background-color: white;
		border-radius: 24px 0;
		border: 1px solid lightyellow;
		float: left;
		}
	.scripta { /* ambre */
		color: #F0C300;
		font-weight: bold;
		}
	.scriptum {
		color: #F0C300;
		font-size: 1.2em;
		font-weight: bold;
		display: inline-block;
		padding-bottom: 10px;
		}
	.lien_script {
		text-decoration: none;
		color: red;
		}
	.lien_doc {
		font-size: 1.1em;
		text-decoration: none;
		color: orange;
		}
	.lien_colonne { /* Δ hyper-image */
		margin-left: 20px;
		padding: 20px 32px;
		font-size: 1.1em;
		color: grey;
		float: left;
		}
	.lien_colonne:hover {
		color: darkorange;
		}
	.legende {
		padding: 10px;
		font-size: 1.2em;
		text-align: center;
		color: grey;
		}
	.legende:hover {
		cursor: pointer;
		}
	.blue_mark { /* Bleu céleste */
		font-size: 1.4em;
		color: #007FFF;
		}
	.whitehall {
		width: 800px;
		margin-top: 0;
		margin-left: 30px;
		padding: 20px;
		text-align: left;
		background-color: white;
		border-radius: 24px 0 24px 0;
		border: 1px solid lightyellow;
		}
/* ----------------- Constellations ----------------- */
	#milky_way {
		position: relative;
		width: 1024px;
		height: 192px;
		border-top: 2px solid #FFE4E1;
		background-color: white;
		}
	#m1, #m2 {
		float: left;
		width: 512px;
		opacity: 0.1;
		border: none;
		}
	#text_logo {
		position: absolute;
		bottom: 30px;
		left: 10px;
		width: 40px;
		padding: 20px;
		}
	#gryffon {
		position: absolute;
		bottom: 20px;
		left: 436px;
		width: 150px;
		border: 1px solid grey;
		border-radius: 100px;
		}
	#logo_cercle {
		position: absolute;
		bottom: 35px;
		right: 0;
		width: 50px;
		padding: 20px 25px;
		}
	#text_logo:hover, #gryffon:hover, #logo_cercle:hover {
		cursor: pointer;
		}
/* ----------------- Post-Scriptum ----------------- */
	#scriptorium {
		position: relative;
		width: 984px;	
		padding-left: 40px;
		text-align: left;
		font-family: "Century Gothic",sans-serif;
		color: grey;
		background-color: whitesmoke;
		display: none;
		}
	#scripto_down {
		position: absolute;
		top: 40px;
		left: 60px;
		width: 55px;
		padding: 20px;
		}
	#scripto_up {
		position: absolute;
		top: 40px;
		left: 850px;
		width: 55px;
		padding: 20px;
		}
	h3 {
		color: #F0C300;
		font-size: 1.4em;
		}
	#scripto_down:hover, #scripto_up:hover {
		cursor: pointer;
		}
/* ------------------------- Sandbox ------------------------ */
	#sammlung {
		width: 1024px;
		display: none;
		}
	#kami {
		position: relative;
		height: 85px;
		background-color: lightgrey;
		border-top: 2px solid #FFE4E1;
		}
	#high_tint {
		position: absolute;
		top: -10px;
		left: 50px;
		width: 100px;
		height: 40px;
		padding-top: 15px;
		text-align: center;
		color: white;
		background-color: lightgrey;
		border: 2px solid white;
		border-radius: 8px;
		}
	#midd_zoom {
		position: absolute;
		top: -10px;
		right: 100px;
		width: 100px;
		height: 40px;
		padding-top: 15px;
		text-align: center;
		color: white;
		background-color: lightgrey;
		border: 2px solid white;
		border-radius: 8px;
		}
	#color1 {
		position: absolute;
		top: 15px;
		left: 250px;
		width: 50px;
		height: 50px;
		color: white;
		background-color: lightgrey;
		border: 2px solid white;
		border-radius: 50px;
		opacity: 0.8;
		display: none;
		}
	#color2 {
		position: absolute;
		top: 15px;
		left: 350px;
		width: 50px;
		height: 50px;
		color: white;
		background-color: grey;
		border: 2px solid white;
		border-radius: 50px;
		opacity: 0.8;
		display: none;
		}
	#color3 {
		position: absolute;
		top: 15px;
		left: 450px;
		width: 50px;
		height: 50px;
		color: white;
		background-color: #F9EEDF;
		border: 2px solid white;
		border-radius: 50px;
		opacity: 0.8;
		display: none;
		}
	#color4 {
		position: absolute;
		top: 15px;
		left: 550px;
		width: 50px;
		height: 50px;
		color: white;
		background-color: #03224C;
		border: 2px solid white;
		border-radius: 50px;
		opacity: 0.8;
		display: none;
		}
	#color5 {
		position: absolute;
		top: 15px;
		left: 650px;
		width: 50px;
		height: 50px;
		color: white;
		background-color: darkred;
		border: 2px solid white;
		border-radius: 50px;
		opacity: 0.8;
		display: none;
		}
	#midd_zoom:hover, #high_tint:hover {
		cursor: pointer;
		}
	#color1:hover, #color2:hover, #color3:hover, #color4:hover, #color5:hover {
		cursor: pointer;
		border: 4px solid white;
		opacity: 1;
		}
	#highway {
		font-size: 2em;
		padding: 20px;
		background-color: grey;
		}
	.bordure {
		margin: 10px;
		border: 6px solid white;
		}
	.bord_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;
		}
/* ----------------- responsive design ----------------- */
	@media(orientation:portrait){
		#parthenon {
			padding-bottom: 20px;
		}
		#logo_retour {
			position: absolute;
			top: 8px;
			left: 30px;
			width: 50px;
			padding-left: 30px;
			padding-top: 18px;
			padding-right: 30px;
			padding-bottom: 15px;
		}
		#memo {
			position: absolute;
			top: 4px;
			left: 310px;
		}
		#menu_delta {
			position: absolute;
			top: 10px;
			left: 690px;
			width: 50px;
			font-size: 3.5em;
			padding-left: 30px;
			padding-top: 8px;
			padding-right: 30px;
			padding-bottom: 12px;
		}
		#red_square {
			position: absolute;
			top: 10px;
			left: 820px;
			padding: 15px;
		}
		#menu_page_logo {
			position: absolute;
			top: 6px;
			left: 930px;
			font-size: 3.5em;
		}
		#topic {
			padding-top: 15px;
		}
		.hercule {
			font-size: 2.2em;
			}
		li {
			margin-bottom: 5px;
			}
		h2 {
			color: red;
			font-size: 2em;
		}
		h3 {
			font-size: 1.5em;
		}
		p {
			font-size: 1.4em;
		}
		.lien_colonne {
			padding: 5px 32px 25px 32px;
			font-size: 1.4em;
		}
		.lien_doc {
			font-size: 1.2em;
		}
		.legende {
			font-size: 1.4em;
		}
		#text_logo {
			position: absolute;
			bottom: 40px;
			left: 10px;
			width: 50px;
		}
		#logo_cercle {
			position: absolute;
			bottom: 40px;
			right: 5px;
			width: 55px;
		}
		#scripto_down {
			position: absolute;
			top: 40px;
			left: 60px;
			width: 65px;
		}
		#scripto_up {
			position: absolute;
			top: 40px;
			left: 850px;
			width: 65px;
		}
	}