p {
	color: #000000;
	font-family: Verdana, Arial, Tahoma, Lucida, sans-serif;
	font-size: 12px;
	text-decoration: none;
	text-align: justify;
}

li {
	color: #800000;
	font-family: Verdana, Arial, Tahoma, Lucida, sans-serif;
	font-size: 12px;
	text-decoration: none;
	text-align: justify;
}

h1{
	color: #800000;
	font-family: Verdana, Arial, Tahoma, Lucida, sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
}

h2 {
	color: #800000;
	font-family: Verdana, Arial, Tahoma, Lucida, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}

h3 {
	color: #800000;
	font-family: Verdana, Arial, Tahoma, Lucida, sans-serif;
	font-size: 14px;
	text-decoration: none;
}

h4 {
	color: #800000;
	font-family: Verdana, Arial, Tahoma, Lucida, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

h5 {
	color: #800000;
	font-family: Verdana, Arial, Tahoma, Lucida, sans-serif;
	font-size: 11px;
	text-decoration: none;
}

h6 {
	color: #800000;
	font-family: Verdana, Arial, Tahoma, Lucida, sans-serif;
	font-size: 11px;
	text-decoration: none;
}
td {
	color: #000000;
	font-family: Verdana, Arial, Tahoma, Lucida, sans-serif;
	font-size: 12px;
	text-decoration: none;
}

a:link {
    color: #800000;
    background-color: #f0f0f0;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
}
a:visited {
    color: #800000;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
}
a:hover {
    color: #ffffff;
    text-decoration: underline;
    background-color: #808080;
    font-weight: normal;
    font-style: normal;
}
a:active {
    color: #ffffff;
    text-decoration: none;
    background-color: #808080;
    font-weight: bold;
    font-style: normal;
}

.boite { 
	display: inline-block;
	text-align : center;
	margin:5px;
}

.scroll_container {
	display:flex;
	overflow-x: auto;
	width:100%;
	flex-wrap: nowrap
}


@media screen and (min-device-width: 640px) and
	   (min-width: 640px) {

	.menu {height:25px; background:#f0f0f0; margin:0px 0 0px 0; 
	-moz-border-radius: 0 0 0 0;
	-webkit-border-radius: 0 0 0 0;
	-ms-border-radius: 0 0 0 0;
	border-radius: 0 0 0 0;
	}

	.menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; position:relative;}
	.menu > ul {float:left;}

	.menu ul ul {position:absolute; left:-9999px;}
	.menu > ul > li {float:left; display:block; position:relative;}

	.menu ul ul {background:#f0f0f0; padding:10px 0; border:1px solid #000000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
	z-index:3;
	}
	.menu > ul > li > ul {border-top:0;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	-ms-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	}

	.menu a {font:normal 11px verdana, arial, sans-serif; color:#800000; line-height:25px; text-decoration:none;padding:0 30px 0 15px; }
	.menu > ul > li > a {float:left; text-transform:none; color:#800000; font-weight:bold; }
	.menu ul ul li a {line-height:20px; }

	.menu ul li:hover > ul {left:0; top:25px;}
	.menu ul ul li:hover > ul {left:100%; top:auto; margin:-31px 0 0 -10px;}
	.menu li.left:hover > ul {left:auto; right:0; top:25px;}
	.menu li.left ul li:hover > ul {left:auto; right:100%; top:auto; margin:-31px -10px 0 0;}

	.menu li.left ul a {text-align:right; padding:0 15px 0 30px;}

	.menu li a.fly {background:transparent url(http://www.arpalhands.org/users/files/images/modele/arrow.gif) no-repeat right center;}
	.menu li.left ul a.fly {background:transparent url(http://www.arpalhands.org/users/files/images/modele/arrow.gif) no-repeat left center;}

	.menu > ul li:hover > a {background-color:#808080; color:#ffffff;}
	.menu ul ul li:hover > a,
	.menu ul ul li:hover > a.fly {background-color:#808080; color:#ffffff;}

	.menu > ul > li.close {display:none; position:absolute; right:-10px; top:-22px; width:32px; height:32px; background:none;}

	/* Cache le menu pour ecran PC */
	.menu ul li.icon {display: none;}

	.entete, .menu, .corps, .pied, .admin{ width:100%; margin:0px auto 0px auto; padding:5px 5px 5px 5px;}
	.entete { background-color:#ffffff; position:relative; padding:0px 5px 0px 5px; }
	.menu { background-color:#f0f0f0; position:relative; padding:0px 5px 0px 5px; z-index:2 }
	.corps { background-color:#ffffff; position:relative; z-index:1 }
	.pied { background-color:#f0f0f0; }
	.admin { background-color:#f0f0f0; }

	.bandeau { width:75%; min-height:180px; }
	.logo { width:250px; position:absolute; right:0; top:0;}

	.unquartgauche { position:absolute; top:20px; left:0; width:23%; padding:0px 1% 0px 1%;} /* unquartgauche */
	.unquartdroite { position:absolute; top:20px; right:0; width:23%; padding:0px 1% 0px 1%;} /* unquartdroite*/
	.demicentre { margin: 0 25%; width:48%; border-left:1px solid #000000; border-right:1px solid #000000; padding:0px 1% 0px 1%; } /* demicentre */
	.troisquartgauche { width:73%; border-right:1px solid #000000; padding:0px 1% 0px 1%;} /* troisquartgauche */
	.cadre { position:relative; }
	.demigauche { top:0; right:0; width:49%; border-right:1px solid #000000; padding:0px 1% 0px 1%;} /* demigauche */
	.demidroite { margin:0 50%; position:absolute; top:0; left:0; width:46%; padding:0px 2% 0px 2%;} /* demidroite */
	.tiergauche { position:absolute; top:-10px; width:31%; border-right:1px solid #000000; padding:0px 1% 0px 1%;} /* tiergauche */
	.tiercentre { margin: 0 33%; width:31%; border-left:1px solid #000000; border-right:1px solid #000000; padding:0px 1% 0px 1%;} /* tiercentre */
	.tierdroite { position:absolute; margin: 0 67%; top:-10px; width:31%; padding:0px 1% 0px 1%;} /* tierdroite */
    .photosmobile { display:none;}

 	
	.menu label {
		display: none;
	}
	.menu input.trigger {
		display: none;
	}
}

@media screen and (max-device-width: 640px),
       screen and (max-width: 640px) {
 
	 
	img, object, embed, video, iframe { max-width: 100%; }

	a {font-size:14px; }
	.entete, .corps, .pied, .admin { background-color:#ffffff; min-width:200px; width:100%; margin:0px 0px 0px 0px; padding:2px 2px 2px 2px; }

	.entete { display:none;}
	.bandeau { display:none;}
	.admin { display:none;}
	.titre{ display:none; }
	.logo { width:100%; position:static;}
	.unquartdroite, .unquartgauche, .demicentre, .troisquartgauche, .demigauche, .demidroite, .tiergauche, .tiercentre, .tierdroite, .cadre 
		{ margin: 0 0; position:static; width:100%; border-left:0px solid #000000; border-right:0px solid #000000;}

		table.dyn tr {
			display: block;
			border: 1px solid #000000;
		}
		table.dyn td {
			display: block;
			border: none;
		}
    .photosordi { display:none;}
		
	.menu {
		font-size:18px;
		position: relative;
	}

	.menu ul {
		display: none;
		width: 100%;
		list-style: none;
		margin: 0px;
		padding: 0px;
	}

	.menu ul li a {
		display: block;
		padding: 1em;
		background: #e0e0e0;
		color: #800000;
		text-decoration: none;
		border-right: 1px solid #0a6b44;
	}

	.menu ul li a:hover {
		background: #808080;
		color:#ffffff
	}

	.menu ul li:last-of-type a {
		border-right: 0px;
	}

	.menu ul li ul li a {
		padding-left: 1.5em;
	}

	.menu ul li ul li ul li a {
		padding-left: 3.125em;
	}

	.menu input.trigger {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.menu input.trigger:checked ~ ul, .menu input.trigger:checked ~ ul li ul {
		display: block !important;
	}

	.menu label {
		position: relative;
		display: block;
		min-height: 2em;
		padding: .45em;
		font-size: 1.1em;
		margin: 0;
		cursor: pointer;
		background: #f0f0f0;
		line-height: 2em;
		color: #800000;
	}

	.menu label:after {
		position: absolute;
		right: 1em;
		top: .2em;
		content: "\2261";
		font-size: 1.8em;
		color: #800000;
	}
}