/* CSS of the website */

@font-face
{
	font-family: 'PixelFont';
	src: url('Minecraftia-Regular.ttf');
}

@font-face
{
	font-family: 'flipps';
	src: url('belfast.ttf');
}

html
{
	font-family: "flipps" !important;
	position: relative;
}

body
{
	color: #333333;
	background-color: #F5F5F5;
	font-family: calibri, serif;
	margin: 0;
	padding: 0;
}

h1
{
	text-align: center;
}

h2
{
	font-size: 34px;
	font-family: 'consolas', Arial;
}

h3
{
	text-align: left;
	margin: 10px 0;
}

img
{
	border: none;
}

footer
{
	box-shadow: 0 3px 5px #000 inset;
	position: relative;
	top: 100px;
	bottom: 0;
	background: #333333;
	padding: 50px 0 10px 0;
	text-align: center;
	font-style: italic;
	color: #DDDDDD;
}

header
{
	height: 30%;
	background: navy;
	width: 100%;
	opacity: 0.8;
}

a
{
	color: #012345;
	text-decoration: none;
	transition: color 0.2s ease-out;
}

a:hover
{
	color: #234567;
}

article
{
	margin: 0 5% 3% 5%;
	padding: 20px;
	text-align: justify;
}

.BODY_tutorials article
{
	position: relative;
	top: 50px;
}

aside
{
	margin: 150px 10% 150px 400px;
	text-align: justify;
	position: relative;
	top: 30px;
}

code
{
	background: #211E1E;
	color: #EEE;
	padding: 10px 10px 40px 25px;
	margin: 20px;
	display: block;
	text-align: left;
	border-radius: 5px;
	border: 2px solid #000;
	overflow: auto;
}

code li { list-style: none; }

table { border-collapse: collapse; border: 2px solid #888; margin: 0 auto; }
.P_table { text-align: center; }
td, th { padding: 7px 20px; border-left: 1px solid #888; }
th { border-bottom: 2px solid #888; }
tr:nth-child(even)
{
	padding: 30px;
	background: #BCDEFF;
}

dt
{
	font-weight: bold;
	font-size: 18px;
	margin-top: 10px;
}

.h2_wiki
{
	background: #C7E2FF;
	padding: 30px 20px 0 20px;
	border: 3px solid #123456;
	position: relative;
	right: 100px;
	bottom: 20px;
	width: 450px;
	height: 70px;
	margin: 0;
	opacity: 0.9;
}

.main_menu
{
	border-bottom: 2px solid #555555;
	background: #F0F0EC;
	padding-left: 20%;
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 80px;
	z-index: 100;
	overflow: hidden;
}

.main_menu li
{
	display: inline-block;
	padding: 0 0 0 5%;
	text-align: right;
	font-size: 22px;
	margin-left: 1%;
	position: relative;
	top: 2px;
	left: 20px;
	font-family: consolas, arial, serif;
}

.main_menu form input
{
	position: absolute;
	top: 40px;
	right: 3%;
	padding: 5px 10px;
	border: 1px solid #5F7F9E;
	border-radius: 4px;
	width: 200px;
	transition: border 0.2s ease-out;
}

.menu_current
{
	position: absolute;
	top: 75px;
	height: 5px;
	background: #555;
}

.main_menu form input:focus
{
	border: 1px solid #000;
}

.IMG_logo
{
	position: absolute;
	top: 5px;
	left: 6%;
}

.IMG_logo_little { visibility: hidden; }

.P_sentence_random
{
	margin: 2px 0 0 9%;

}

.main_menu hr
{
	position: absolute;
	top: 20px;
	left: 27%;
	width: 70%;
}

.icons_Main_menu
{
	height: 20px;
	float: right;
	position: relative;
	bottom: 78px;
	right: 4%;
	margin: 0 1%;
	opacity: 0.8;
}

#cookie_banner
{
	position: fixed;
	bottom: 0; left: 0; right: 0;
	background: rgba(20, 20, 20, 0.8);
	color: #DDD;
	padding: 5px;
	z-index: 100000000000;
}
#cookie_banner a:visited { color: #89ABCD !important; }
#cookie_banner a:hover { color: #89ABCD !important; transition: none; }
#cookie_banner a { transition: none; }


.tuto_menu
{
	border: 3px solid #31506F;
	border-radius: 7px;
	width: 300px;
	left: 2%;
	overflow: hidden;
	padding: 1%;
	background: #FAFAFA;
	color: #333;
	opacity: 0.95;
	z-index: 100;
}

.tuto_menu_top { top: 400px; }
.tuto_menu_fixed { top: 20px; }
.tuto_menu_bottom { bottom: 305px; }

.tuto_menu ul
{
	list-style: none;
	margin: 10px;
}

.DIV_current_page
{
	position: relative;
	margin-left: 50%;
	width: 50%;
	right: 300px;
	top: 120px;
}

.tuto_title
{
	font-size: 25px;
	width: 125%;
	padding: 30px;
	margin: 0;
	position: relative;
	right: 35%;
	bottom: 25px;
	border-bottom: 2px solid #234567;
	border-radius: 10px;
	text-align: center;
	background: #ECECFA;
}

.H3_img_triangle
{
	display: inline;
	width: 8px;
	opacity: 0.7;
	position: relative;
	right: 105%;
	top: 8px;
	float: right;
}

.tuto_icons { margin: 12px 15px 5px 15px; width: 50px; }
.share_buttons { text-align: center; }

.menu_separation
{
	margin-top: 40px;
	width: 85%;
}

.DIV_sign
{
	font-style: italic;
	text-align: right;
}

.IMG_picture
{
	width: 300px;
	float: left;
	position: relative;
	top: 40px;
	margin: 5px 15px 10px 0px;
}

.IMG_news
{
	width: 300px;
	float: left;
	margin: 5px 15px 10px 0px;
}

.SPAN_accolade
{
	font-weight: bold;
	color: #555555;
}

.DIV_loop
{
	top: 80px;
	height: 379px;
}

.P_lastNews
{
	font-size: 40px;
	text-align: center;
	font-family: 'Flipps', Arial;
}

.SPAN_loopText
{
	font-family: "consolas", arial;
	font-size: 50px;
	position: absolute;
	width: 55%;
	top: 180px;
	left: 30px;
	color: #E0E0E0;
}

.H2_loopText
{
	font-size: 80px;
	position: absolute;
	margin: 0;
	width: 47%;
	top: 50px;
	text-align: left;
	left: 30px;
	color: #C0C0C0;
}

.H2_ListTutorials { text-align: center; }

.P_intro
{
	margin: 0 0 0 320px;
	padding: 0;
	font-size: 25px;
	width: 72%;
	line-height: 45px;
}

.P_pegi
{
	font-style: italic;
	font-size: 17px;
	opacity: 0.8;
	margin: 0 5px 0 7px;
	position: relative;
	width: 300px;
	z-index: 1000;
}

.BT_tuto
{
	z-index: 1000;
	position: relative;
	bottom: 185px;
	left: 10px;
	float: left;
	border: none;
	box-shadow: none;
	width: 300px;
	border-radius: 7px;
	color: #DDD;
	background: #555;
	padding: 12px;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
}
.ARTICLE_mosaique:hover .BT_tuto { opacity: 1; }

.H1_tuto { font-family: "Flipps", "PixelFont", Arial; }
.H2_tuto
{
	position: relative;
	top: 130px;
	left: 400px;
	width: 500px;
	height: 42px;
	font-size: 35px;
	font-family: "consolas", Arial;
	color: #01235F;
	text-align: left;
}

.H1_tutoTitle
{
	font-size: 85px;
	font-family: "flipps", serif;
	position: relative;
	top: 100px;
	left: 28%;
	height: 154px;
	width: 62%;
	line-height: 75px;
	color: #123456;
	margin: 35px 0 70px 0;
	padding: 0;
}

aside .SPAN_img
{
	position: relative;
	float: right;
	left: 6%;
	width: 80%;
	padding: 0 15%;
	margin: 10px 0 35px 0;
	text-align: center;
	color: #012345;
	font-family: Arial;
	cursor: pointer;
}

/*aside a::before
{
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0%; right: 0;
	box-shadow: inset 0 -100px 75px #F5F5F5;
}*/
aside .SPAN_img img { max-width: 100%; margin: 20px auto; }

.DIV_result .SPAN_img
{
	position: relative;
	float: left;
	margin-bottom: 40px;
}
/*.DIV_result a::before
{
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	box-shadow: inset 0 -50px 25px #E0E0E0;
}*/
.DIV_result .SPAN_img img { max-width: 60%; }

aside .IMG_title
{
	position: relative;
	text-align: center;
	padding: 0 20%;
	font-style: italic;
	font-size: 13px;
}

.DISP_img
{
	position: fixed;
	left: 0; right: 0; top: 0; bottom: 0;
	background: #000;
	z-index: 10000;
	opacity: 0.7;
}
.DIV_dispIMG img { max-width: 99%; max-height: 99%; z-index: 100000; position: fixed; }
.DIV_menu_affichage_tutos img
{
	width: 27px;
	position: absolute;
	top: 310px;
	right: 50px;
	opacity: 0.8;
}

.ARTICLE_mosaique
{
	position: relative;
	border: 1px solid #222;
	width: 320px;
	display: inline-block;
	padding: 0;
	margin-left: 2%;
	height: 420px;
	box-shadow: 1px 1px 7px #555;
}

.ARTICLE_mosaique h1
{
	text-align: center;
	font-family: consolas;
	font-size: 25px;
	margin: 10px;
	height: 50px;
	position: relative;
	bottom: 6px;
	z-index: 300000;
	transition: bottom 0.4s ease-in-out;
}
.ARTICLE_mosaique:hover h1 { bottom: 230px; }
.ARTICLE_mosaique .IMG_mosaique { width: 100%; transition: opacity 0.2s ease-in-out; }
.ARTICLE_mosaique:hover .IMG_mosaique { opacity: 0 !important; }

.DIV_infos_tuto
{
	margin-top: 25px;
	height:28px;
}

.ARTICLE_mosaique .P_intro_mosaique
{
	margin: 20px;
	position: relative;
	bottom: 440px;
	float: left;
	font-size: 15px;
	overflow: hidden;
	transition: bottom 0.4s ease-in-out;
}
.ARTICLE_mosaique:hover .P_intro_mosaique { bottom: 590px; }

.hide_intro
{
	background: linear-gradient(#FFF 100px, #DDD 180px);
	position: relative;
	bottom: 241px;
	width: 100%;
	height: 182px;
	display: inline-block;
	z-index: 2;
}

.P_drafting_mosaique
{
	font-style: italic;
	font-size: 14px;
	opacity: 0.8;
	float: left;
	width: 100%;
	height: 17px;
	position: relative;
	bottom: 12px;
	left: 7px;
	z-index: 1000;
	color: #555599;
}

.IMG_info
{
	width: 40px;
	float: left;
	position: relative;
	margin: 10px;
	z-index: 100;
}

.UL_categories
{
	position: absolute;
	top: 50px;
	right: 0; left: 0;
	padding: 10px 100px;
	background: #fff;
	border-bottom: 4px solid #FFF;
	color: #222;
	opacity: 0.8;
	font-size: 30px;
}

.button
{
	width: 15%;
	padding: 10px 20px;
	background: #123456;
	color: #DFDFDF;
	opacity: 0.95;
	transition: none;
}

.button:hover { color: #DFDFDF; }
.button:active { border: none; box-shadow: 2px 2px 2px #000 inset; }

.tuto_before
{
	float: left;
	position: relative;
	bottom: 40px;
	left: 28%;
	border-radius: 20px 4px 4px 20px;
}

.tuto_after
{
	float: right;
	position: relative;
	bottom: 40px;
	right: 10%;
	text-align: right;
	border-radius: 4px 20px 20px 4px;
}

.calto_add_text
{
	position: absolute;
	right: 320px;
	text-align: center;
	width: 100%;
	font-family: Pixelfont;
	font-size: 7px;
	color: #000;

}

textarea.modif
{
	height: 133px;
	width: 102%;
	font-size: 25px;
	font-family: calibri;
	line-height: 40px;
}

.pencil_update
{
	width: 25px;
	float: right;
	position: relative;
	top: 158px;
	right: 80px;
	margin: 0;
}

.pencil_update_wiki
{
	width: 20px;
	float: right;
	position: relative;
	top: 30px;
	left: 30px;
	margin: 0;
}

.TEXT_change
{
	position: relative;
	float: left;
	top: 170px;
	left: 3%;
	width: 40%;
	height: 100%;
	padding: 20px;
	margin-bottom: 20px;
	min-height: 70px;
	font-family: calibri;
	resize: vertical;
}

.TITLE_change
{
	position: absolute;
	top: 270px;
	left: 3%;
	font-size: 25px;
	padding: 5px;
}

.DIV_result
{
	position: relative;
	float: right;
	right: 3%;
	top: 170px;
	width: 40%;
	background: #E0E0E0;
	padding: 20px;
	border-radius: 5px;
	margin-bottom: 270px;
	min-height: 30px;
	text-align: justify;
}

.DIV_result .IMG_title
{
	display: block;
	position: relative;
	top: 10px;
	width: 500px;
	text-align: center;
	margin: 0 auto;
}

.editorButton
{
	position: absolute;
	border: none;
	padding: 10px 30px;
	background: #444;
	color: #EEE;
	border-radius: 5px;
	cursor: pointer;
}
.editorButton:hover { color: #EEE; }

.alertFinish
{
	position: fixed;
	bottom: 10px;
	left: 43%;
	width: 11.2%;
	text-align: center;
	font-size: 22px;
}

.H1_editText
{
	position: relative !important;
	top: 100px !important;
	font-size: 70px !important;
	font-family: Flipps !important;
}

.INPUT_modif
{
	width: 86%;
	padding: 7px 20px;
	font-size: 35px;
	font-family: consolas, Arial;
	color: #01235F;
}

.P_drafting
{
	font-style: italic;
	font-size: 14px;
	opacity: 0.8;
	margin: 20px 5px 0 7px;
	width: 300px;
	float: left;
	position: relative;
	z-index: 1000;
	color: #555599;
}

.FORM_sendMail
{
	width: 800px;
	margin: 230px 10px 50px 7%;
}

.FORM_sendMail label
{
	width: 200px;
	margin: 20px 0;
	font-size: 18px;
}

.FORM_sendMail #email, .FORM_sendMail #pseudo
{
	margin: 0 50px 20px 0;
	width: 80%;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #555;
	font-family: Arial;
	font-size: 18px;
}

.FORM_sendMail textarea
{
	width: 90%;
	height: 200px;
	font-family: Arial;
	border-radius: 7px;
	border: 1px solid #555;
	padding: 10px;
	resize: vertical;
}

.FORM_item { float: right; }
.FORM_item2 { float: left; }

.INPUT_submit
{
	border: none;
	background: #123F66;
	width: 30%;
	opacity: 0.8;
	color: #BCDEFF;
	margin: 20px 0;
	padding: 10px;
	border-radius: 3px;
	font-size: 16px;
	position: relative;
	left: 58%;
	cursor: pointer;
	text-align: center;
	transition: color 0.2s ease-out;
}
.INPUT_submit:hover { color: #FFF; }

.where_Im
{
	position: absolute;
	top: 82px;
	width: 94%;
	height: 70px;
	padding: 10px 0 0 6%;
	font-size: 45px;
	font-weight: bold;
	border-bottom: 2px groove #FFF;
	background: #EBEBEB;
}

.FORM_infos
{
	width: 35%;
	font-size: 22px;
	text-align: justify;
	position: absolute;
	top: 225px;
	right: 40px;
}

.FORM_share .tuto_icons
{
	margin: 12px 30px;
	width: 65px;
}

.mailTitle
{
	font-size: 40px;
	margin-bottom: 20px;
}

.tabulation { margin-left: 30px; display: block;}
.tab2 { margin-left: 30px; }

.SPAN_langage
{
	float: right;
	position: relative;
	top: 30px;
	font-size: 15px;
}

.FORM_search
{
	background: #DBEAF9;
	border-top: 1px solid #ABB7C3;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px;
	margin: 0;
	z-index: 1000;
}

.FORM_search
{
	border: 1px solid #ABB7C3;
	opacity: 0;
}
.FORM_search:focus
{
	border: 1px solid #ABB7C3;
}

.menu_wiki
{
	width: 220px;
	border-right: 1px solid #AAA;
	background: #FFFFFF;
	position: absolute;
	top: 0;
	padding-top: 5px;
	text-align: center;
	z-index: 99;
}

.wiki_menu_title
{
	margin: 25px 0 0 0;
	text-align: center;
	font-size: 27px;
}

.menu_wiki ul
{
	list-style: none;
	font-size: 18px;
	text-align: left !important;
}

.SEC_dico
{
	position: relative;
	left: 30%;
	top: 80px;
	font-size: 24px;
	width: 55%;
	margin-bottom: 100px;
}
.SEC_dico h1 
{
	font-size: 70px;
	font-family: Flipps;
	color: #123456;
}

.DISP_romcall
{
	position: absolute;
	top: 120px;
	left: 25%;
	width: 65%;
}

.DISP_romcall h1
{
	font-size: 50px;
	margin-bottom: 0px;
}
.DISP_romcall hr
{
	background: #345678;
	height: 3px;
	margin-bottom: 20px;
	box-shadow: none;
	border: none;
}

.article_wiki
{
	text-align: justify;
	margin: 0;
}

.search_romcall
{
	margin-top: 110px;
	padding: 4px 12px;
	height: 32px;
	width: 170px;
}

.disp_results_romcalls
{
	position: absolute;
	top: 180px;
	left: 400px;
}

.orderBy { margin-top: 5px; }

.IMG_work
{
	position: absolute;
	top: 150px;
	left: 5%;
	width: 35%;
}

.SEC_notWorking
{
	position: absolute;
	right: 3%;
	top: 130px;
	width: 50%;
}

.SEC_notWorking h1 { font-size: 60px; text-align: left; }
.SEC_notWorking p { font-size: 20px; }

.go_admin
{
	opacity: 0.85;
	position: fixed;
	width: 2px;
	bottom: 0;
	left: 0;
	top: 0;
	background: #444;
	z-index: 100;
}
.go_admin:hover { color: #DDD; }

.A_contactFooter
{
	font-style: normal;
	color: #AAA !important;
}


/* ABOUT */

.ART_about
{
	position: relative;
	top: 80px;

}
.ART_about h2
{
	text-align: center;
	font-size: 85px;
	color: #123456;
	font-family: 'flipps';
}

/* PROGRAMS */

.IMG_program { float: left; margin-bottom: 80px; margin-top: 10px; }
.INFOS_program { position: relative; top: -8px; margin: 0; }

.HR_program_left
{
	position: relative;
	top: 12px;
	float: left;
	width: 2px;
	margin: 0 10px 0 25px;
	box-shadow: none;
	border: none;
	min-height: 128px !important;
	background: #888;
}

.BUT_download
{
	background: #BBB;
	padding: 5px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.pagination_programs
{
	margin: 4px;
	position: relative;
	left: 90%;
}



@media screen and (max-width: 580px)
{
	.HR_program_left { opacity: 0; position: absolute; }
	.list_programs article { text-align: center; }
	.IMG_program { float: none; clear: both; margin-bottom: 30px; }
	.INFOS_program { text-align: justify !important; }
}

@media screen and (max-width: 1050px)
{
	.main_menu li { padding: 0 2%; }
	.IMG_logo { opacity: 0; }
	.main_menu { padding-left: 10%; }
	.main_menu li { font-size: 22px; }
	.main_menu hr { left: 18%; width: 78%; }
	.IMG_logo_little
	{
		position: absolute;
		left: 7%;
		top: 5px;
		visibility: visible;
	}

	.FORM_infos { position: relative; left: 6%; top: 10px; width: 55%; }
}

@media screen and (max-width: 1340px)
{
	.FORM_item { width: 46%; margin-right: 54%; }
	.FORM_sendMail textarea { width: 70%; }
	.INPUT_submit { position: static; }
}

@media screen and (max-width: 1400px)
{
	.main_menu input { visibility: hidden; }
	.IMG_logo { left: 2%; }
	.main_menu li { padding: 0 2%; }
	.menu_current { opacity: 0; }
}


/* STYLES DISPLAY */
.success
{
	background: #c9ffb7;
	color: #259500;
	padding: 15px;
	border: 1px solid #FFF;
}

.warning
{
	background: #ffdfbf;
	color: #ff8822;
	padding: 15px;
	border: 1px solid #FFF;
}

.error
{
	background: #ffcccc;
	color: #ff1c1c;
	padding: 15px;
	border: 1px solid #FFF;
}