/* ----------- Styles UCLIP ROUTE DES IMAGES ----------- */
	a {
		text-decoration: none;
		}
	#retour { 
		position: absolute;
		top: 12px;
		left: 0;
		padding-left: 25px;
		padding-right: 25px;
		width: 50px;
		border-radius: 8px;
		opacity: 0.8;
		}
	#liste_cahier {
		position: absolute;
		top: 12px;
		left: 100px;
		width: 50px;
		padding-left: 10px;
		padding-right: 20px;
		}
	#zoom_pnx {
		position: absolute;
		top: 8px;
		right: 100px;
		padding-left: 50px;
		padding-top: 5px;
		padding-right: 20px;
		}
	#retour:hover, #liste_cahier:hover, #zoom_pnx:hover {
		cursor: pointer;
		}
	#logo_photo {
		width: 50px;
		opacity: 0.8;
		border-radius: 33px;
		border: 1px solid white;
		}
	#nom_cahier {
		padding-left: 220px;
		color: white;
		background-color: burlywood;
		cursor: default;
		}
/* ------------------------- MENUS -------------------------- */
	.amber { /* Misty Rose : #FFE4E1 */
		padding-left: 60px;
		height: 50px;
		font-size: 2em;
		padding-top: 10px;
		border-bottom: 2px solid #FFE4E1;
		}
	.amber a { /* Jaune Moyen Saturé : #F0C300 */
		margin-left: 28px;
		color: #F0C300;
		}
	.amber a:hover { /* Rouge feu : #FE1B00 */
		color: #FE1B00;
		}
	#menu_cahier {
		margin-top: 0;
		padding-left: 200px;
		padding-top: 28px;
		padding-bottom: 20px;
		font-size: 1.5em;
		color: orange;
		}
	#menu_page {
		margin-top: 0;
		padding-left: 180px;
		padding-top: 28px;
		padding-bottom: 20px;
		font-size: 1.5em;
		color: #DE3163;
		}
	li {
		font-size: 1.3em;
		margin-bottom: 4px;
		list-style-type: square;
		}
	li a {
		display: inline-block;
		min-width: 600px;
		color: #F0C300;
		}
	li a:hover {
		color: red;
		}
/* ------------------------- ICONES ------------------------- */
	#menu_page_logo {
		position: absolute;
		top: 0;
		right: 16px;
		font-size: 3.5em;
		color: #DE3163;
		padding-left: 16px;
		padding-right: 12px;
		padding-bottom: 8px;
		z-index: 10;
		}
	#square1 {
		position: fixed;
		top: 98px;
		left: 16px;
		padding: 10px;
		z-index: 10;
		}
	#unten_ikone {
		width: 50px;
		border: 1px solid #DE3163;
		border-radius: 33px;
		opacity: 0.8;
		}
	#square2 {
		position: fixed;
		top: 98px;
		right: 16px;
		padding: 10px;
		z-index: 10;
		}
	#oben_ikone {
		width: 50px;
		border: 1px solid #DE3163;
		border-radius: 33px;
		opacity: 0.8;
		}
	#square3 {
		position: fixed;
		top: 190px;
		right: 16px;
		padding: 10px;
		display: none;
		}
	#close_icon {
		width: 50px;
		opacity: 0.8;
		}
	#menu_page_logo:hover, #square1:hover, #square2:hover, #square3:hover {
		cursor: pointer;
		}
/* ----------------------- COUVERTURE ----------------------- */
	#paradis {
		position: relative;
		}
	#page_name {
		position: absolute;
		top: 60px;
		left: 450px;
		font-size: 2.2em;
		}
	#page_name:hover {
		cursor: default;
		}
/* ------------------------- AUTRES ------------------------- */
	.diapo {
		width: 800px;
		margin-left: 80px;
		margin-bottom: 20px;
		border: 1px solid silver;
		border-radius: 8px;
		}
	h1 {
		margin-left: 80px;
		padding-top: 20px;
		color: orange;
		}
	h2 {
		margin-left: 40px;
		margin-top: 40px;
		padding-top: 15px;
		padding-bottom: 4px;
		border-bottom: 2px solid white;
		color: purple;
		}
	p {
		margin-left: 80px;
		font-size: 1.5em;
		font-family:"Times New Roman", Times, serif;
		text-align: justify;
		color: grey;
		}
/* ----------------- responsive design ----------------- */
	@media(orientation:portrait){
		#page_name {
			position: absolute;
			top: 50px;
			left: 350px;
			font-size: 2.4em;
		}	
		h1 {
			margin-left: 80px;
			font-size: 3em;
			color: #DE3163;
		}
		h2 {
			font-size: 2em;
			color: orange;
		}
		p {
			font-size: 1.8em;
		}
		li {
			font-size: 1.5em;
		}
	}
/* ---------------------- COMPOSITION ----------------------- */
	#menu_box_logo {
		position: fixed;
		top: 0;
		right: 18px;
		font-size: 3.5em;
		color: white;
		padding-left: 16px;
		padding-right: 10px;
		padding-bottom: 8px;
		z-index: 10;
		display: none;
		}
	#menu_box_logo:hover {
		cursor: pointer;
		}
	#top_box {
		position: relative;
		display: none;
		border-top: 2px solid #FFE4E1;
		}
	#menu_box {
		position: absolute;
		top: 0;
		left: 150px;
		width: 800px;
		padding-top: 20px;
		}
	#menu_box a {
		font-size: 2.2em;
		padding-left: 10px;
		padding-right: 10px;
		margin-left: 20px;
		color: #F0C300;
		text-decoration: none;
		}
	#menu_box a:hover {
		color: red;
		}
	#doc_box {
		min-height: 180px;
		padding-right: 40px;
		color: #F0C300;
		background-color: #F9EEDF;
		}
	#doc_box img {
		margin-left: 130px;
		border: 8px solid white;
		}
	.scan_doc {
		width: 200px;
		margin-bottom: 20px;
		}
	.fiche {
		margin-left: 50px;
		}
	.lien_script {
		text-decoration: none;
		color: #F0C300;
		}
	.lien_script:hover {
		color: red;
		}
	.puce {
		font-size: 2.2em;DC143C
		color: #F0C300;
		}
/* ------------------------- SANDBOX ------------------------ */
	#doppelbahn {
		display: none;
		}
	#kami {
		position: relative;
		height: 85px;
		background-color: lightgrey;
		border-top: 2px solid #FFE4E1;
		border-bottom: 2px solid white;
		}
	#high_tint {
		position: absolute;
		top: -10px;
		left: 20px;
		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 { /* NavajoWhite : #FFDEAD */
		position: absolute;
		top: 15px;
		left: 250px;
		width: 50px;
		height: 50px;
		color: white;
		background-color: #FFDEAD;
		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 { /* Light grayish yellow : #F9EEDF */
		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 { /* Very dark blue : #03224C */
		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 0 20px 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;
		}
	.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;
		}
/* --------------------- FOOTER --------------------- */
	#plancher {
		position: relative;
		height: 40px;
		background-color: lightgrey;
		border-top: 2px solid #FFE4E1;
		}
	#high_clip {
		margin-left: 50px;
		margin-bottom: 35px;
		display: none;
		}
	#logo_cercle {
		position: absolute;
		bottom: 2px;
		right: 0;
		width: 50px;
		padding: 10px 25px;
		}
	#logo_delta {
		position: absolute;
		bottom: 2px;
		left: 0;
		width: 60px;
		padding: 8px 25px;
		}
	#soto:hover, #logo_cercle:hover, #logo_delta:hover {
		cursor: pointer;
		}
/* ----------------- responsive design ----------------- */
	@media(orientation:portrait){
		#kami {
			height: 90px;
		}
		#highway {
			padding: 40px 0 40px 20px;
		}
	}