<!--
13.04.2020
-->
<style>
	body {
	display : table;
	width: 100%;
		font-family: Arial, Helvetica, sans-serif;
		position: relative;
	}
	body.client {
		--lien_color: var(--lien_p70_color);
	}
	body.admin {
		--lien_color: var(--lien_adm_color);
	}
	A {
		color: var(--lien_color);
	}
#bandeau {
/*	min-height: 90px;

	background-color: var(--sous_titre_bgcolor);
*/
}

#page {
	background-color: var(--page_bgcolor);
	color: black;
	width: 70%;
	min-width: 500px;
	margin: 0 auto;
	border-radius: 20px;
	padding: 10px 5px;
	box-shadow: 0px 0px 0.3em 0.3em var(--page_box_shadow);
}

.page_titre {
	background-color: var(--page_bgcolor);
	color: black;
	width: 100%;
	text-align: center;
	margin: 30px 0 20px 0;
	border-radius: 20px;
	padding: 10px 5px;
	box-shadow: 0px 0px 0.3em 0.3em var(--page_box_shadow);
}
.page100 {
	background-color: var(--page_bgcolor);
	color: black;
	width: 100%;
	margin: 10px 0 20px 0;
	border-radius: 20px;
	padding: 5px;
	box-shadow: 0px 0px 0.3em 0.3em var(--page_box_shadow);
}

div#bxcon {
	min-width: 300px;
	background-color:var(--page_bgcolor);
	color: black;
	border-radius: 20px;
	box-shadow: 0px 0px 0.5em 0.5em var(--page_box_shadow);
	text-align: center;
	vertical-align: middle;
	width: 400px ;
	margin: 0 auto;
}

#page2 {
	text-align: center;
}
div#page70 {
	width: 80%;
	/*max-width: 1000px;*/
	margin: 10px auto;
	padding: 0 5px 10px 5px;
}
div#page70b {
	width: 70%;
	max-width: 1000px;
	margin: 10 auto;
}
#pagedroite {
	background-color:var(--page_bgcolor);
	color: black;
	min-width: 750px;
	margin-left: 250px;
	margin-right: auto;
	padding: inherit;
	box-shadow: 0px 0px 0.5em 0.5em var(--page_box_shadow);
}

#pagewide {
	background-color: var(--pagewide_bgcolor);
	box-shadow: 0px 0px 0.3em 0.3em var(--pagewide_box_shadow);
	width: 98%;
	/*min-width: 750px;*/
	max-width: 98vw;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 5px 5px 5px;
	border-radius: 20px;
}
#contactb {
	background-color: var(--pagewide_bgcolor);
	color: black;
	width: 40%;
	min-width: 250px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 0px 0.5em 0.5em var(--pagewide_box_shadow);
}

#table_wrapper {
	display:table;
	width:100%;
}
#table_row {
  display:table-row;
}
#table_cell {
	display: table-cell;
}
#part_conteneur {
	display:table-cell;
	vertical-align: middle;
}
#part_conteneur_48h {
	display:table-cell;
	vertical-align: middle;
}
#part1a {
	display:table-cell;
		min-width: 160px;
		//max-width: 500px;
		background-color: var(--page_bgcolor);
		color: black;
		border-radius: 20px;
		box-shadow: 5px 5px 5px 0px var(--page_box_shadow);
	width: 200px;
	text-align: center;
	vertical-align: middle;
}
#part2a {
	/*display:table-cell;*/
	background-color: var(--page_bgcolor);
		color: black;
		min-width: 350px;
		border-radius: 20px;
		padding: 10px 5px;
		box-shadow: 0px 0px 0.3em 0.3em var(--page_box_shadow);
		/*box-shadow:  var(--pagewide_box_shadow);*/
}
.gc1 {
	grid-column: 1;
	justify-self:justify;
}
.gc2 {
	grid-column: 2;
	justify-self:justify;
}
.gc3 {
	grid-column: 3;
	justify-self:justify;
}

#part2c {

		display:table-cell;
		background-color: var(--page_bgcolor);
		color: black;
		min-width: 350px;
		border-radius: 20px;
		padding: 5px 5px;
		box-shadow: 5px 5px 5px 0px var(--page_box_shadow);
		position: absolute;
		left: calc(50vw - 180px);
		top: calc(50vh - 50px);

	}
#part2d {
		background-color: var(--page_bgcolor);
		color: black;
		/*min-width: 350px;*/
		border-radius: 20px;
		padding: 5px 5px;
		box-shadow: 5px 5px 5px 0px var(--page_box_shadow);

	}
#part2e {
		
		/*background-color: var(--page_bgcolor);*/
		color: black;
	}

#part3a {
	display:table-cell;
		min-width: 350px;
		background-color: var(--page_bgcolor);
		color: black;
		border-radius: 20px;
		box-shadow: 5px 5px 5px 0px var(--page_box_shadow);
	width: 98%;
	text-align: center;
	vertical-align: middle;
	padding: 4px;
}
#part4a {
	display:table-cell;
	min-width: 8px;
}
#part4b {
	display:table-cell;
	min-width: 8px;
}

#part5a {
	font-family: Arial, Helvetica, sans-serif;
	display:table-cell;
		min-width: 160px;
		background-color:var(--page_bgcolor);
		color: black;
		border-radius: 20px;
		box-shadow: 0px 0px 0.5em 0.5em var(--page_box_shadow);
	width: 200px;
	text-align: center;
	vertical-align: top;
}

div#part6a {
	display:table-cell;
		
		filter: alpha(opacity=65);
		background-color:var(--page_bgcolor);
		color: black;
		min-width: 500px;
		border-radius: 20px;
		padding: 10px 5px;
}

div#part7a {
	display:table-cell;
		min-width: 10px;
		opacity: 0;
	width: 200px;
}
div#part_logo_client {
	display:table-cell;
	vertical-align: middle;
	width: 350px;
}
div#part_logo_33ch {
		display:table-cell;
	vertical-align: middle;
	//align: right;
	padding: 0.5em;
}
div#part_titre_site {
	display:table-cell;
	vertical-align: middle;
	font-size: 3em;
	background-color: transparent;
	color: var(--sous_titre_color);
	font-family: Arial; // "Comic Sans MS", Arial, cursive;
	font-weight: bold;
	text-decoration: inherit;
	text-align: center;
	text-shadow: black 0.1em 0.1em 0.2em;
	width: 100%;
}
div#part_titre_site_gras {
	display:table-cell;
	vertical-align: middle;
	font-size: 3em;
	background-color: transparent;
	color: var(--sous_titre_bgcolor);
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
	font-weight:bolder;
	text-decoration: inherit;
	text-align: center;
	width: 100%;
}
.field_icon {
	margin-left: -30px;
	position: relative;
	z-index: 2;
	color: grey;
	}


body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12pt;
}
</style>

<style type="text/css" media="screen">
body {
	font-family: Arial, Helvetica, Sans;
	margin: 0;
}
#menu_gal {
	height: 31px;
	font-size: 12pt;
	clear:both;
	background-color: var(--menu_admin_1);
	margin: 0 0;
	padding: 0;
}
#menu_gal ul {
	padding:0;
	list-style-type:none;
	text-align:center;
	width: auto;
	z-index: 13;
	margin: 0;
}
#menu_gauche li {
	float:left;
	margin:0;
	padding:0;
	background-color: var(--menu_admin_1);
	z-index: 15;
	border-style:outset;
	border-width: 1px;
	min-width: 70px;
}
#menu_gal li a {
	display:block;
	color: var(--menu_admin_4);
	text-decoration:none;
	padding: 0.3em 15px;
}
#menu_gal li ul li a:hover {
	/* au survol du sous-menu*/
	color: var(--menu_admin_3);
	background-color: var(--menu_admin_2);
}
#menu_gal ul li ul {
	display:none;
	text-align:left;
}
#menu_gal ul li:hover ul {
	/* fait apparaître le bloc du 2eme UL */
	display:block;
}
#menu_gal ul li:hover {
	/* couleur au survol*/
	background-color: var(--menu_admin_2);
}
#menu_gal li:hover ul li {
	float:none;
}

#menu_gal li ul {
	position:absolute;
}

#menu_droite li {
	float: right;
	margin:0;
	padding:0;
	background-color:var(--menu_admin_1);
	z-index: 15;
	border-style:outset;
	border-width: 1px;
}

#menu_gal ul li ul li{
	font-size: 12pt;
}

li.disabled >a {
  pointer-events: none;
  cursor: default;
}
li.vert>a>i {
	color: green;
}
li.rouge>a>i {
	color: red;
}
li.disabled>a>i {
	color: #c0c0c0;
}

input[type=text]{
	background:url(../_commun/images/User.png)#fafafa 12pt center no-repeat;
}
input[type=password]{
	background:url(../_commun/images/locked.png)#fafafa 12pt center no-repeat;
}
#affsel {
	text-align: center;
	background-color: var(--page_bgcolor);
	color: #000000;
	border: 1px solid transparent;
	//box-shadow: 0px 0px 0.5em 0.5em var(--pagewide_box_shadow);
	font-family:Arial, Helvetica, sans-serif ;
	font-size: 14px;
	//width: 99vw;
	margin-top: 10px;
}
#choix10 input[type=checkbox] {display:none;}
#choix10 input[type=checkbox] + label {cursor:pointer;margin-right:3rem}


.bloc-principal-init {
		background-image: url("http://24hvillenave.fr/resultats/images/fond.jpg");
		background-color: #c0c0c0;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	min-height: calc(100vh);
	height: auto;
	margin: 0;
}
.bloc-principal {
	min-height: calc(100vh);
	margin: 0;
}

.with_footer {
	min-height: calc(100vh - 40px);
}
.footer A {
	color: #000;
}
input[type=text].no{
	background: #FFFFFF;
	padding: 10px 10px 10px 10px;
	color: #000;
}
input[type=password].no{
	background: #FFFFFF;
	padding: 10px 10px 10px 10px;
	color: #000;
}
input.big {
	font-size: 2em;
}
button.big {
	font-size: 2em;
}
#petit {
	font-size: 0.5em;
}

button[disabled],html input[disabled]{
cursor: not-allowed;
color: #c0c0c0;
}

.gros {color:green;font-size: 2rem;}

table.fine {
	border-width:1px; 
	border-style:solid; 
	border-color:black;
	border-collapse:collapse;
}
table.fine td, th { 
	border-width:1px;
	border-style:solid; 
	border-color:black;
}
table.no {
	border-style:none; 
	border-collapse:collapse
}
table.no td,th{
	border-style:none; 
	border-collapse:collapse
}


input.jour {
	width: 40px;
	background-image: none;
	background-color: #FFFFFF;
	padding: 10px;
}
input.annee {
	width: 60px;
	background-image: none;
	background-color: #FFFFFF;
	padding: 10px;
}

.table_max {
	background-color: #c0c0c0;
	font-size: 0.85em;
}

.rgpd {
	text-align: center;
	background-color: lightgrey;;
	color: #000000;
	border: 2px solid;
	font-family:Arial, Helvetica, sans-serif ;
	font-size: 1.5em;
	position : relative;
	width: 70%;
	padding: 10px;
	margin:auto;
}

.ontop {
	position:absolute;
	top: calc(50vh - 8em);
	text-align: center;
}
a img {
	border: none;
}
.divacacher{
	display: none;
	position:inherit;
	/*width:200px;*/
	z-index:5;
	background:white;
	border:1px solid black;
	margin:0 auto;
}
	.loginbox {
		width:48%;
	}
div#formulaire_large {
	background-color: var(--page_bgcolor);
	color: black;
	width: 70%;
	min-width: 500px;
	margin: 0 auto;
	//border-radius: 25px;
	padding: 10px 5px;
	box-shadow: 5px 5px 5px 0px var(--page_box_shadow);
	}
div#formulaire_etroit {
		display: none;
	}
.container2 {
	/* une seuke case pour center "article" */
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr ;
		grid-auto-flow: row;
	}

.container3 {
		display: grid;
		grid-template-areas: "c0 c0" "c1 c2" "c3 c4";
		grid-template-columns: repeat(2, 1fr);
		grid-auto-flow: column;
		/*grid-column-gap: 20px;*/
		grid-row-gap: 5px;
		border-radius: 20px;
	}
.container4 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		grid-auto-flow: row;
	}
.container5 {
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		grid-column-gap: 20px;
	}
.container6 {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-auto-flow: row;
		grid-gap: 20px;
	}
.container7 {
		display: grid;
		grid-template-areas: "c1 c2" "c3 c4";
		grid-template-columns: repeat(2, 1fr);
		grid-auto-flow: row;
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		border-radius: 20px;
	}

section {
  height: calc(100vh - 200px);
  min-height: 260px;
}
article, aside, header, footer {
	/*padding: 10px;*/
	margin: 1px;
	justify-self: center;
	align-self: center;
}


table.contact_bas {
	margin: auto auto;
	border-spacing: 40px 0;
	border-collapse: separate;
}

@media only screen and (max-width:960px)
{
	body
	{
		font-size:12pt;
	}
	.affmenu
	{
		display: none;
	}
	.loginbox {
		width:90%;
	}
	
	div#formulaire_large {
		width: 90%;
		min-width: 0;
		box-shadow: none;
	}

	div#formulaire_etroit {
		display: none;
	}

	#divacacher{
		width: 90%;
		margin: 10px 0px;
		font-size: 150%;
	}
	#menu_gal {
		height: auto;
		font-size: 8pt;
	}
	#menu_gauche li {
		min-width:40px;
	}
	#menu_gal li a {
		padding: 10px;
		font-size: 150%;
	}
	#bandeau
	{
		width: 100%;
		min-height: 0;
		height: auto;
	}
	div#page70 {
		width: 90%;
	}
	div#page70b {
		width: 100%;
	}
	div#page {
		width: 90%;
		min-width: 0;
		box-shadow: none;
	}
	.page100 {
		box-shadow: none;
	}
	.page_titre {
		box-shadow: none;
	}
	div#part1a
	{
		display: inline-block !important;
		width: 98%;
		margin: 10px 0px;
		opacity: 1;
		min-width: 0;
		box-shadow: none;
	}
	div#part2a
	{
		/*display: inline-block !important;*/
		width: 98%;
		margin: 0;
		padding: 5px;
		min-width: 0;
		box-shadow: none;
	}
	div#part2d
		{
			margin: 0;
			padding: 5px 5px;
			min-width: 0;
			box-shadow: none;
		}
	div#part3a
	{
		display: inline-block !important;
		width: 98%;
		margin: 0;
		opacity: 1;
	}
	div#part4a
	{
		display: none;
	}
	div#part4b
	{
		display: inline-block !important;
		padding: 5px;
	}
	div#part6a
	{
		display: inline-block !important;
		width: 100%;
		padding: 0px;
		opacity: 1;
	}
	.container3 {
			display: grid;
			grid-template-areas: "c0" "c1" "c2" "c3" "c4";
			grid-template-columns: 1fr;
			grid-auto-flow: row;
		}
	.container4 {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr ;
		grid-auto-flow: row;
	}
	.container6 {
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		grid-gap: 20px;
	}
	.container7 {
		display: grid;
		grid-template-areas: "c1" "c2" "c3" "c4";
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		/*grid-column-gap: 20px;*/
		grid-row-gap: 5px;
		border-radius: 20px;
	}

	div#part7a
	{
		display: none;
	}
	div#part_conteneur 
	{
		display:inline-block !important;
		vertical-align: middle;
		align: center;
		width: 100%;
		opacity: 1;
	}
	div#part_logo_client {
		display: none;
	}
	div#part_logo_33ch {
		display: none;
	}
	div#part_titre_site {
		display:inline-block !important;
		vertical-align: middle;
		align: left;
		opacity: 1;
		font-size: 1.5em;
	}
	.field_icon {
		margin-left: -40px;
		position: relative;
		z-index: 2;
		color: grey;
	}
	table {
		font-size: 100%;
	}
	input[type=text]{
		font-size: 150%;
	}
	input[type=password]{
		font-size: 150%;
	}
	select {
		font-size: 120%;
	}
	label{
		font-size: 150%;
		text-align:left;
	}
	input[type=submit]{
		font-size: 150%;
	}
	A {
		/*font-size: 150%;*/
	}

	.gc1 {
		grid-column: 1;
		justify-self:justify;
	}
	.gc2 {
		grid-column: 1;
		justify-self:justify;
	}
	.gc3 {
		grid-column: 1;
		justify-self:justify;
	}
	textarea {
		max-width: 100%;
	}
	table.contact_bas {
		margin: 0 35px 0 0;
		border-spacing: 0 5px;
		border-collapse: separate;
	}
}


@media only screen and (max-width:450px)
	{
		table.contact_bas {
			margin: 0 35px 0 0;
			border-spacing: 0;
			border-collapse: separate;
		}
			.affmenu_2
			{
				display: none;
			}
		.container3 {
				display: grid;
				grid-template-areas: "c0" "c1" "c2" "c3" "c4";
				grid-template-columns: 1fr;
				grid-auto-flow: row;
			}
		.container4 {
				display: grid;
				grid-template-columns: 1fr;
			}
		.container6 {
				display: grid;
				grid-template-columns: 1fr;
				grid-auto-flow: row;
				grid-gap: 20px;
			}
		.container7 {
			display: grid;
			grid-template-areas: "c1";
			grid-template-columns: 1fr;
			grid-auto-flow: row;
			/*grid-column-gap: 20px;*/
			grid-row-gap: 5px;
			border-radius: 20px;
		}
		
		.gc1 {
				grid-column: 1;
				justify-self:justify;
			}
		.gc2 {
				grid-column: 1;
				justify-self:justify;
			}
		
			A {
				/*font-size: 100%;*/
			}
		#menu_gal li a {
				font-size: 140%;
				padding: 10px;
			}
		.acacher {
				display: none;
			}
		#part2c
			{
				display:inline-block !important;
				width: 340px;
				margin: 0;
				padding: 5px 5px;
				min-width: 0;
				box-shadow: none;
				position: absolute;
				left: calc(50vw - 175px);
				top: calc(50vh - 90px);
			}
		div#part2d
			{
				margin: 0;
				padding: 5px 5px;
				min-width: 0;
				box-shadow: none;
			}
		div#v_centre {
				left: calc(50vw - 175px);
				top: calc(50vh - 90px);
			}
		div#page70
			{
				width: 100%;
			}
		#formulaire_large {
				display: none;
			}
		#formulaire_etroit {
			display: inline-block !important;
				background-color: var(--page_bgcolor);
				color: black;
				margin: 0;
				padding: 5px 5px;
				min-width: 0;
				box-shadow: none;
				font-size:100%;
				text-align: center;
			}
		#formulaire_etroit td {
				font-size:120%;
			}
		#formulaire_etroit label{
				font-size: 120%;
				text-align:left;
				margin: 0 10px;
			}
		input[type=text], input[type=password], input[type=submit], select {
				font-size: 100%;
			}
		
		input.big {
				font-size: 2em;
			}
		button.big {
				font-size: 2.5em;
			}
		#bandeau
			{
				min-height: 0;
				height: auto;
			}
		}


.content1 {
	//padding: 0 200px;
	font-size: 18px;
	text-align: center;
	min-height: 130px;
	margin-left: auto;
	margin-right: auto;
	width: 300px;	
	border-radius: 20px;
}
  .content1 h1 {
    color: #2a3c49;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    font-family: "Myriad Pro","FrutigerLT Black", sans-serif;
    padding: 10px 0 25px 0;
    }
  .content1 strong {
	font-weight: bold;
	text-align: center;
}
  .content1 em {
    font-style: italic; }
  .content1 .bloc {
	width: 67px;
	height: 60px;
	background: url(../horloge/img/number.png) no-repeat;
	float: left;
	text-align: center;
	/*color: #AA0000;*/
	margin-left: 20px;
	box-shadow: 10px 5px 12px var(--page_box_shadow);
	border-radius: 20px;
}
    .content1 .bloc strong {
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	display: block;
	color: #6600CC;
	margin-bottom: 15px;
	margin-top: 7px;
}
  .content1 .last {
    margin-right: 2px; }
  .content1 .numbers {
	overflow: visible;
    *zoom: 1.5;
	padding: 15px 10px;
}

@keyframes fromtop{
		0% {margin:-200px auto;}
		50% {margin:220px auto;}
		75% {margin:180px auto;}
		100% {margin:200px auto;}
}

blink {
  -webkit-animation: 2s linear infinite condemed_blink_effect; // pour Safari 4.0-8.0
  animation: 2s linear infinite condemed_blink_effect;
}
@-webkit-keyframes condemed_blink_effect { // pour Safari 4.0-8.0
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
@keyframes condemed_blink_effect {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

</style>
