CSS OpenNote

	/*----------------------------------*/
	/* BODY */
	/*----------------------------------*/
	body {
		background-color: indianred;
		font-family: 'Roboto';
		margin: 0;
		padding: 0;
	}

	li {
		text-decoration: none;
	}

	a {
		text-decoration: none;
		color: black;
	}

	/*----------------------------------*/
	/* HEADER */
	/*----------------------------------*/
	.HEADER_bloc {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 66px;
		width: 100%;
		z-index: 1000;
		color: #6D7A8B;
		font-size: 14px;
		background: #982C33;
		box-shadow: 0 10px 10px rgba(109, 122, 139, .1);
		backface-visibility: hidden;
		font-family: 'Roboto';
	}

	.HEADER_logo {
		margin: 0 auto;
		float: left;
	}

	.HEADER_logo img {
		width: 66px;
		height: 66px;
	}

	.HEADER_menu ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		text-align: center;
	}

	.HEADER_menu li {
		float: left;
		height: 66px;
		line-height: 66px;
		color: #FFFFFF;
		font-weight: 700;
		text-decoration: none;
	}

	.HEADER_menu li a {
		display: block;
		float: left;
		height: 66px;
		line-height: 66px;
		color: #FFFFFF;
		font-weight: 700;
		text-decoration: none;
		width: 120px;
	}

	.HEADER_menu li a:hover {
		transition-duration: .3s;
		color: #6D7A8B;
	}

	.HEADER_menu ul li ul {
		display: none;
	}

	.HEADER_menu ul li:hover ul {
		display: block;
	}

	.HEADER_menu ul li:active ul {
		display: block;
	}

	.HEADER_menu li:hover ul li {
		float: none;
	}

	.HEADER_sous_menu {
		height: 25px;
		line-height: 25px;
		color: #FFFFFF;
		text-decoration: none;
		background: #404852;
	}

	.HEADER_sous_menu:hover {
		background-color: #718792;
		color: #FFFFFF !important;
	}

	.HEADER_member {
		float: right;
	}

	.HEADER_sous_member {
		display: block;
		float: left;
		height: 66px;
		padding: 0 15px;
		line-height: 66px;
		color: #FFFFFF;
		font-weight: 700;
		text-decoration: none;
	}

	.HEADER_sous_member:hover {
		transition-duration: .3s;
		color: #6D7A8B;
	}

	.HEADER_admin_menu {
		width: 15%;
		height: 100%;
		background-color: #404852;
		position: fixed;
		margin-top: -75px;
		z-index: 10000;
	}

	.HEADER_admin_sous_menu {
		font-size: 20px;
		color: white;
		text-decoration: none;
		display: flex;
		flex-direction: column;
		padding: 10px;
		z-index: 10000;
	}

	.HEADER_admin_sous_menu:hover {
		background-color: #718792;
	}

	/*----------------------------------*/
	/* HEADER */
	/*----------------------------------*/
	.MENU_contextuel {
		visibility: hidden;
		width: 100px;
		height: auto;
		background-color: #FFFFFF;
		box-shadow: 1px 1px 12px #555555;
		position: absolute;
		cursor: pointer;
	}

	.MENU_contextuel_element {
		visibility: hidden;
		width: 100%;
		height: 20px;
	}

	/*----------------------------------*/
	/* MESSAGES */
	/*----------------------------------*/
	.MESSAGE_error {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 120px;
		width: 100%;
		z-index: 10000;
		font-size: 14px;
		background: #D50000;
		box-shadow: 0 2px 10px rgba(109, 122, 139, .1);
		backface-visibility: hidden;
		color: black;
	}

	.MESSAGE_success {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 120px;
		width: 100%;
		z-index: 10000;
		font-size: 14px;
		background: #00C853;
		box-shadow: 0 2px 10px rgba(109, 122, 139, .1);
		backface-visibility: hidden;
		color: black;
	}

	/*----------------------------------*/
	/* IMAGES DE FOND */
	/*----------------------------------*/
	.BACKGROUNDS_fullscreen {
		margin-top: 66px;
	}

	.BACKGROUND_index1 {
		background-image: url("../IMG/accueil/img1.jpg");
		background-size: cover;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		width: 100%;
		height: 800px;
		position: relative;

	}

	.BACKGROUND_index2 {
		background-image: url("../IMG/accueil/img2.jpg");
		background-size: cover;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		width: 100%;
		height: 800px;
		position: relative;
	}

	.BACKGROUND_index3 {
		background-image: url("../IMG/accueil/img3.jpg");
		background-size: cover;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		width: 100%;
		height: 800px;
		position: relative;
	}

	.BACKGROUND_message {
		width: 50%;
		height: auto;
		position: relative;
		margin: 0 auto;
		top: 40%;
		transform: translateY(-60%);
	}

	.BACKGROUND_message h1 {
		color: indianred;
		font-size: 56px;
	}

	/*----------------------------------*/
	/* INPUTS */
	/*----------------------------------*/
	.INPUT_btn {
		display: inline-block;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		cursor: pointer;
		padding: 10px 20px;
		border: 1px solid #018DC4;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		font: normal 19px/normal "Times New Roman", Times, serif;
		color: rgba(0, 0, 0, 0.9);
		-o-text-overflow: clip;
		text-overflow: clip;
		background: #FFFFFF;
		-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
		-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
		-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
		transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	}

	.INPUT_btn:hover {
		color: white;
		background-color: grey;
		transition: 1s;
	}

	.INPUT_btn2 {
		border: none;
		display: inline-block;
		padding: 8px 16px;
		vertical-align: middle;
		overflow: hidden;
		text-decoration: none;
		color: inherit;
		background-color: inherit;
		text-align: center;
		cursor: pointer;
		white-space: nowrap;
		color: #FFFFFF;
		background-color: #4CAF50;
		margin: 10px;
	}

	.INPUT_btn2:hover {
		box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
	}

	.INPUT_btn3 {
		text-decoration: none;
		font-size: 20px;
		background-color: #EEEEEE;
		color: black;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
	}

	.INPUT_btn4 {
		background-color: #EEEEEE;
		font-size: 20px;
		text-decoration: none;
		color: black;
		padding: 5px;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
	}

	.INPUT_text {
		padding: 8px;
		display: block;
		border: none;
		border-bottom: 1px solid black;
		width: 40%;
		background-color: #2998CD;
	}

	.INPUT_text2 {
		width: 200px;
		display: inline-block;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		padding: 10px 20px;
		border: 1px solid #B7B7B7;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		font: normal 16px/normal "Times New Roman", Times, serif;
		color: rgba(0, 142, 198, 1);
		-o-text-overflow: clip;
		text-overflow: clip;
		background: rgba(252, 252, 252, 1);
		-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2) inset;
		box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2) inset;
		text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.66);
		-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
		-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
		-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
		transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	}

	.INPUT_text3 {
		padding: 8px;
		display: block;
		border: none;
		border-bottom: 1px solid black;
		width: 99%;
		background-color: #EEEEEE;
	}

	/*----------------------------------*/
	/* CONTAINER */
	/*----------------------------------*/
	.CONTAINER_admin {
		width: 85%;
		height: auto;
		margin-left: 15%;
		margin-top: 100px;
		text-align: center;
	}

	.CONTAINER_20 {
		width: 20%;
		height: auto;
		margin: auto;
	}

	.CONTAINER_30 {
		width: 30%;
		height: auto;
		margin: auto;
	}

	.CONTAINER_40 {
		width: 40%;
		height: auto;
		margin: auto;
	}

	.CONTAINER_50 {
		width: 50%;
		height: auto;
		margin: auto;
	}

	.CONTAINER_60 {
		width: 60%;
		height: auto;
		margin: auto;
	}

	.CONTAINER_70 {
		width: 70%;
		height: auto;
		margin: auto;
	}

	.CONTAINER_80 {
		width: 80%;
		height: auto;
		margin: auto;
	}

	.CONTAINER_90 {
		width: 90%;
		height: auto;
		margin: auto;
	}

	.CONTAINER_100 {
		width: 100%;
		height: auto;
		margin: auto;
	}

	.CONTAINER_left_9 {
		width: 9%;
		height: auto;
		float: left;
	}

	.CONTAINER_right_89 {
		width: 89%;
		height: auto;
		float: right;
	}

	.CONTAINER_left_19 {
		width: 19%;
		height: auto;
		float: left;
	}

	.CONTAINER_right_79 {
		width: 79%;
		height: auto;
		float: right;
	}

	.CONTAINER_left_29 {
		width: 29%;
		height: auto;
		float: left;
	}

	.CONTAINER_right_69 {
		width: 69%;
		height: auto;
		float: right;
	}

	.CONTAINER_left_50 {
		width: 50%;
		height: auto;
		float: left;
		margin: 0;
	}
	.CONTAINER_right_50 {
		width: 50%;
		height: auto;
		float: right;
		margin: 0;
	}

	.CONTAINER_height_500 {
		min-height: 500px;
	}

	.CONTAINER_height_150 {
		height: 150px;
	}

	.CONTAINER_fly_back {
		position: absolute;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgb(0, 0, 0);
		background-color: rgba(0, 0, 0, 0.4);
	}

	.CONTAINER_fly {
		background-color: #FEFEFE;
		margin: auto;
		margin-top: 66px;
		padding: 20px;
		border: 1px solid #888888;
		width: 80%;
	}

	.CONTAINER_center {
		text-align: center;
	}
	.CONTAINER_div_center {
		margin: auto;
	}

	.CONTAINER_white {
		background-color: #FFFFFF;
		box-shadow: 1px 1px 12px #555555;
	}

	.CONTAINER_grey {
		background-color: #EEEEEE;
		box-shadow: 1px 1px 12px #555555;
	}

	/*----------------------------------*/
	/* TUILE */
	/*----------------------------------*/
	.TUILE_bloc {
		width: 30%;
		height: 300px;
		float: left;
		overflow: hidden;
		text-decoration: none;
		color: black;
		background: #EEEEEE;
		border-radius: 2px;
		display: inline-block;
		margin: 1%;
		position: relative;
		box-shadow: 1px 1px 12px #555555;
		transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
	}

	.TUILE_bloc:hover {
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
	}

	.TUILE_bloc a {
		text-decoration: none;
		color: black;
	}

	.TUILE_img img {
		width: auto;
		height: 100px;
		float: left;
	}

	.TUILE_img {
		display: inline-block;
	}

	.TUILE_titre h1 {
		font-size: 25px;
		text-align: center;
	}

	.TUILE_titre {
		width: 100%;
		height: 200px;
		display: block;
	}

	.TUILE_bulle span {
		display: none;
		color: #FFFFFF;
		background: rgba(51, 51, 51, 0.75);
		padding: 20px;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		width: 100%;
		text-align: center;
		position: absolute;
		z-index: 1000;
		top: 40%;
	}

	.TUILE_bulle:hover span {
		display: block;
	}

	.TUILE_bloc_ncolor {
		width: 30%;
		height: 300px;
		overflow: hidden;
		text-decoration: none;
		color: black;
		display: inline-block;
		margin: 1%;
		position: relative;
	}

	.TUILE_bloc_ncolor a {
		text-decoration: none;
		color: black;
	}

	.TUILE_bloc_ncolor h1 {
		font-size: 50px;
	}
	/*----------------------------------*/
	/* FICHES QUEST */
	/*----------------------------------*/
	.FICHESQUEST_bloc {
		width: 25%;
		height: 200px;
		float: left;
		overflow: scroll;
		text-decoration: none;
		color: black;
		background: #EEEEEE;
		border-radius: 2px;
		display: inline-block;
		margin: 1%;
		position: relative;
		box-shadow: 1px 1px 12px #555555;
		transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
		text-align: left;
	}
	.FICHESQUEST_bloc p {
		margin: 10px;
	}
	/*----------------------------------*/
	/* APP */
	/*----------------------------------*/
	.APP_tuile {
		width: 8%;
		height: 150px;
		float: left;
		margin: 2%;
	}

	.APP_tuile h1 {
		font-size: 15px;
		text-align: center;
	}

	.APP_tuile img {
		width: 100%;
		height: auto;
	}

	.APP_tuile_folder {
		width: 100px;
		height: 150px;
		float: left;
		margin-left: 10px;
	}

	.APP_tuile_folder h1 {
		font-size: 14px;
		text-align: center;
		word-wrap: break-word;
	}

	.APP_tuile_folder img {
		width: 100%;
		height: auto;
	}

	/*----------------------------------*/
	/* SWITCH */
	/*----------------------------------*/
	.SWITCH {
		display: none;
	}

	.SWITCH:target {
		display: block;
	}

	/*----------------------------------*/
	/* BORDER */
	/*----------------------------------*/
	.BORDER_1px {
		border: 1px solid #EEEEEE;
	}

	.BORDER_10px_blue {
		background-color: #006A9C;
		border-radius: 10px;
		border-style: dashed;
		padding: 15px;
	}

	/*----------------------------------*/
	/* OVERFLOW */
	/*----------------------------------*/
	.OVERFLOW_hidden {
		overflow: hidden;
	}

	/*----------------------------------*/
	/* BULLE */
	/*----------------------------------*/
	.BULLE_gris span {
		display: none;
		color: #FFFFFF;
		background: rgba(51, 51, 51, 0.75);
		padding: 20px;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		width: 250px;
		text-align: center;
		position: absolute;
		z-index: 1000;
		top: 40%;
		left: 50%;
	}

	.BULLE_gris:hover span {
		display: block;
	}

	.BULLE_info {
		display: inline;
		position: relative;
	}

	.BULLE_info img {
		width: 20px;
		margin-left: 5px;
		height: auto;
	}

	.BULLE_info:hover:after {
		background: #333333;
		background: rgba(0, 0, 0, .8);
		border-radius: 5px;
		bottom: 26px;
		color: #FFFFFF;
		content: attr(title);
		left: 50%;
		padding: 5px 15px;
		position: absolute;
		z-index: 98;
		width: 220px;
	}

	.BULLE_info:hover:before {
		border: solid;
		border-color: #333333 transparent;
		border-width: 6px 6px 0 6px;
		bottom: 20px;
		content: "";
		left: 80%;
		position: absolute;
		z-index: 99;
	}

	/*----------------------------------*/
	/* MARGIN */
	/*----------------------------------*/
	.MARGIN_10px_p p {
		margin: 10px;
	}

	.MARGIN_20px_p p {
		margin: 20px;
	}

	.ACTU {
		width: 90%;
		height: 150px;
		overflow: hidden;
		margin: auto;
	}

	/*----------------------------------*/
	/* PADDING */
	/*----------------------------------*/
	.PADDING_5px {
		padding: 5px;
	}

	/*----------------------------------*/
	/* IMAGE */
	/*----------------------------------*/
	.IMG_50px img {
		width: 50px;
	}

	.IMG_100px img {
		width: 100px;
	}

	.IMG_display_inline {
		display: inline-block;
	}

	/*----------------------------------*/
	/* TITRE */
	/*----------------------------------*/
	.TITRE_bandeau_green {
		color: #FFFFFF !important;
		background-color: #4CAF50 !important;
		box-shadow: 1px 1px 12px #555555;
		padding: 0.01em 16px;

	}

	.TITRE_bandeau_green h2 {
		padding: 25px;
		margin: 0 auto;
	}

	/*----------------------------------*/
	/* TEXTE */
	/*----------------------------------*/
	.TEXTE_15px p {
		font-size: 15px;
	}

	.TEXTE_20px p {
		font-size: 20px;
	}

	/*----------------------------------*/
	/* TABLE */
	/*----------------------------------*/
	.TABLE_classique {
		margin: 0 auto 0;
		border-collapse: collapse;
		width: 100%;
	}

	.TABLE_classique td {
		font-size: 14px;
		font-weight: normal;
		padding: 30px;
		text-align: center;
		color: #727888;
		background-color: #F2F2F6;
		width: 18%;
	}
	.TABLE_hover:hover {
		background-color: #e0e0e0;
		transition: 1s;
		z-index: auto;
	}

	/*----------------------------------*/
	/* FOOTER */
	/*----------------------------------*/
	.copyright {
		width: 100%;
		height: auto;
		position: relative;
		bottom: 0px;
		margin-bottom: 0px;
		background-color: indianred;
	}

	.copyright h2 {
		color: #FFFFFF;
		text-align: center;
		padding-top: 20px;
		padding-bottom: 10px;
		margin: 0;
		font-size: 15px;
	}

	.copyright p {
		color: #FFFFFF;
		text-align: center;
		font-size: 15px;
	}

	.copyright a {
		color: #FFFFFF;
		text-align: center;
		font-size: 15px;
	}