@font-face {
    font-family: 'Pacifico';
    src: url('Pacifico.ttf') format('truetype');
}
@font-face {
    font-family: 'SeaSRN';
    src: url('SEASRN.ttf') format('truetype');
}
@font-face {
    font-family: 'Marcel';
    src: url('Marcsc.ttf') format('truetype');
}

:root {
    --main-color-dark: #CF380B;
    --main-color-light: #FFFFFF; /*rgb(248,249,252);*/ 	
}


body
{
	color: var(--main-color-dark);
	margin: 0;
	padding: 0;
	
	/*font-family: "Marcel", "comic Sans MS", cursive, sans-serif;*/
}

input, textarea
{
	color: var(--main-color-dark);
	font-family: "comic Sans MS", cursive, sans-serif;
}

button
{
	color: var(--main-color-dark);
	padding: 5px;
	/*font-size: 1em;*/
	background-color: #FFFFFF;
	border: 2px solid var(--main-color-dark);
	border-radius: 6px;
	
}

select
{
	color: var(--main-color-dark);
	/*font-size: 1em;*/
	background-color: #FFFFFF;
	border: 1px solid var(--main-color-dark);
	border-radius: 3px;
	
}

table, th, tr, td {font-size: 90%; border: 0px; border-collapse: collapse; padding: 5px; line-height:1.1;}

.TableWithSelection table {border: 0px;}
.TableWithSelection td {border: solid 1px;}
.TableWithSelection tr:hover {background-color: #ccccff;}

.TableWithBorder {border-collapse: collapse;}
.TableWithBorder td {border: solid 1px;}
.TableWithBorder td {border: solid 1px;}


#bloc_page
{
	margin: auto;
	width: 100%;
	max-width: 1000px;
	height:100%;
	align: right;
	/*border: solid 2px;*/
}

header
{
	align: left;
	background-color: #FFFFFF;
/*	background-color: #f1b49f;*/
	margin: 0;
    /*border-style: solid;
    border-width: 1px;
	border-radius: 5px;*/
}

footer
{
	background-color: var(--main-color-light);/*#f5ead6;*/
/*	background-color: #f1b49f;*/
	margin: 0;
	margin-top: 10px;
    border-style: solid;
    border-width: 1px;
	border-radius: 5px;
	font-size: 1.1em;
	display: inline-block;

/*	position: fixed; bottom: 0;*/
	width: 100%;max-width: 1000px;

}

#session_div
{
	text-align: right;
	background-color: var(--main-color-light);/*#f5ead6;*/
	padding: 0 10px;
    /*border-style: solid;
    border-width: 1px;
	border-radius: 5px;*/
}

#titre_principal
{
	padding:0 100px; 
}

header h1
{
    font-size: 2.5em;
    font-weight: normal;
	margin: 0px;
	padding: 0px;
	font-family: "SeaSRN", "comic Sans MS", cursive, sans-serif;
}

h2
{
    font-size: 1.2em;
    margin: 0px;
    font-weight: normal;
/*	font-family: "Marcel", "comic Sans MS", cursive, sans-serif;*/

}

article, aside
{
	font-size: 1.2em;
	font-family: "Arial";
/*	font-family: "Pacifico", "comic Sans MS", cursive, sans-serif;*/
    display: inline-block;
    vertical-align: top;
    text-align: justify;
	background: var(--main-color-light);/*#f5ead6;*/
	text-align: left;
}

article
{
	margin: auto;
	margin-top: 10px;
	width: 65%;
    border-style: solid;
    border-width: 1px;
/*	border-radius: 5px;
    box-shadow: 5px 5px 10px #73616d;*/
	float: right;
}

.fullsize
{
	width:100%;
}

.content
{
	margin-left: 10px;
	margin-right: 10px;
	padding-top: 10px;
}

aside
{
	width: 30%;
	margin-top: 10px;
	margin-right:10px;
	padding: 0 10px;
    border-style: solid;
    border-width: 1px;
/*	border-radius: 5px;
    box-shadow: 5px 5px 10px #73616d;*/
}

.menu
{
	display: none;
}

nav
{
	margin: 0;
	padding: 0;
	background-color: var(--main-color-dark);
    display: inline-block;
    width: 100%;
    text-align: center;
}

nav ul
{
    list-style-type: none;
}

nav li
{
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    width:20%;
}

nav li ul /* Sous-listes */
{ 
		display: none; /* Hop, on envoie loin du champ de vision */
		width:100%;
}

nav li:hover ul /* Sous-listes */
{ 
		display: block; /* Hop, on envoie loin du champ de vision */
		position: absolute;
}

nav li ul li
{ 
		background-color: var(--main-color-dark); 
		display: block; /* Hop, on envoie loin du champ de vision */
		/*width: 10%;*/
		margin-left:70px;
		padding-left: 10px;
		text-align: left;
}
nav a
{
    font-size: 1.5em;
    color: #f7e8ee;
    padding-bottom: 3px;
    text-decoration: none;
	width:100%;
}

nav a:hover
{
    color: pink;
    /*border-bottom: 3px solid #760001;*/
}

.MapDiv
{
	Width: 100%;
	Height: 80vh;
}

@media only screen and (max-device-width:480px) {
	.MobileHide
	{
		display: none;
	}
	#titre_principal
	{
		padding:0 0; 
	}
	article, aside
	{
		width: 100%;
		margin: 0px;
		margin-top: 10px;
		padding: 0;
		Line-Height:1.5;
	}
	header
	{
		font-size:70%;
	}
	.menu{
	display:block;
	color: f7e8ee
	}

	nav
	{
		margin: 0;
		padding: 0;
		font-size:150%;

	}
	
	nav ul
	{
		list-style-type: none;
	}

	nav li
	{
		border-color: #f7e8ee;
		border-top-style: solid;
		border-top-width: 1px;
		display: none;
		width:100%;
		text-align: left;
	}
	
	nav:hover li
	{
		display: block;
	}

	nav li ul /* Sous-listes */
	{ 
		border-style: solid;
		border-width: 1px;
		display: none; /* Hop, on envoie loin du champ de vision */
		width:100%;
			
	}

	nav li:hover ul /* Sous-listes */
	{ 
			display: block; /* Hop, on envoie loin du champ de vision */
			position: relative;
	}

	nav li ul li
	{ 
			margin-left:0px;
			padding-left: 10px;
	}
	nav a
	{
	}

	nav a:hover
	{
	}
	
	table img
	{
		width:20px;
		height:20px;
	}
}