/* 
// ------------------------------------------------------------------------- //
// Logiciel pour la Popote Roulante Cowansville								 //
// Feuille de styles pour l'affichage										 //
// ------------------------------------------------------------------------- //
// Auteur: Claude Chiasson (Claude@Chiasson.com)							 //
// Copyright (C) 2024 - Claude Chiasson      		                         //
// ------------------------------------------------------------------------- //
*/
BODY {
SCROLLBAR-FACE-COLOR: #FFFFFF; SCROLLBAR-HIGHLIGHT-COLOR: #E50B00; SCROLLBAR-SHADOW-COLOR: #E50B00; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR: #E50B00; SCROLLBAR-BASE-COLOR: #E50B00; scrollbar-3d-light-color: #FFFFCC; scrollbar-dark-shadow-color: #B18E01 }

h0 {color: #E50B00; font-family: Arial; font-size: 35px; font-weight: bold; margin-top: 3px; margin-bottom: 3px;}	/* Rouge foncé pour identifier les pages */
h1 {color: #008534; font-family: Arial; font-size: 25px; font-weight: bold; margin-top: 3px; margin-bottom: 3px;}	/* Vert */
h2 {color: #008534; font-family: Arial; font-size: 20px; font-weight: bold; margin-top: 3px; margin-bottom: 3px;}
h3 {color: #008534; font-family: Arial; font-size: 16px; font-weight: bold; margin-top: 3px; margin-bottom: 3px;}
h4 {color: #E50B00; font-family: Arial; font-size: 25px; font-weight: bold; margin-top: 3px; margin-bottom: 3px;}	/* Rouge foncé */
h5 {color: #E50B00; font-family: Arial; font-size: 20px; font-weight: bold; margin-top: 3px; margin-bottom: 3px;}
h6 {color: #E50B00; font-family: Arial; font-size: 16px; font-weight: bold; margin-top: 3px; margin-bottom: 3px;}
h7 {color: #20517E; font-family: Arial; font-size: 25px; font-weight: bold; margin-top: 3px; margin-bottom: 3px;}	/* Bleu foncé */
h8 {color: #20517E; font-family: Arial; font-size: 20px; font-weight: bold; margin-top: 3px; margin-bottom: 3px;}
h9 {color: #20517E; font-family: Arial; font-size: 16px; font-weight: bold; margin-top: 3px; margin-bottom: 3px;}

.FondMenu A:link {color: #20517E; background: #FFFFFF;}			/* Bleu foncé sur fond Blanc */
.FondMenu A:visited {color: #20517E; background: #FFFFFF;}
.FondMenu A:active {color: #20517E; background: #FFFFFF;}
.FondMenu A:hover {color: #FFFFFF; background: #20517E;}

.FondMenu1 A:link {color: #20517E; background: #CCFFFF;}		/* Bleu foncé sur fond Bleu pâle */
.FondMenu1 A:visited {color: #20517E; background: #CCFFFF;}
.FondMenu1 A:active {color: #20517E; background: #CCFFFF;}
.FondMenu1 A:hover {color: #CCFFFF; background: #20517E;}

.FondMenu2 A:link {color: #20517E; background: #FFFFFFF;}		/* Bleu foncé sur fond Blanc */
.FondMenu2 A:visited {color: #20517E; background: #FFFFFF;}
.FondMenu2 A:active {color: #20517E; background: #FFFFFF;}
.FondMenu2 A:hover {color: #FFFFFF; background: #20517E;}

.FondMenu3 A:link {color: #FFFFFF; background: #20517E;}		/* Blanc sur fond Bleu foncé */
.FondMenu3 A:visited {color: #FFFFFF; background: #20517E;}
.FondMenu3 A:active {color: #FFFFFF; background: #20517E;}
.FondMenu3 A:hover {color: #20517E; background: #FFFFFF;}

.FondMenu4 A:link {color: #CCFFFF; background: #20517E;}		/* Bleu pâle sur fond Bleu foncé */
.FondMenu4 A:visited {color: #CCFFFF; background: #20517E;}
.FondMenu4 A:active {color: #CCFFFF; background: #20517E;}
.FondMenu4 A:hover {color: #20517E; background: #CCFFFF;}

.FondLien A:link {color: #E50B00; background: #FFFFFF;}			/* Rouge foncé sur fond Blanc */
.FondLien A:visited {color: #E50B00; background: #FFFFFF;}
.FondLien A:active {color: #E50B00; background: #FFFFFF;}
.FondLien A:hover {color: #FFFFFF; background: #E50B00;}

.FondLien1 A:link {color: #FFFFFF; background: #E50B00;}		/* Blanc sur fond Rouge foncé */
.FondLien1 A:visited {color: #FFFFFF; background: #E50B00;}
.FondLien1 A:active {color: #FFFFFF; background: #E50B00;}
.FondLien1 A:hover {color: #E50B00; background: #FFFFFF;}

.FondCCI A:link { text-decoration: none; }						/* lien SANS aucune décoration */
.FondCCI A:visited { text-decoration: none; }
.FondCCI A:hover { text-decoration: none; }
.FondCCI A:active { text-decoration: unone; }

.FondBlanc      {color: #20517E; background-color: #FFFFFF; }
.FondBleuFonce  {color: #FFFFFF; background-color: #20517E; }
.FondBleuPale   {color: #FFFFFF; background-color: #CCFFFF; }
.FondRouge      {color: #FFFFFF; background-color: #E50B00; }
.FondVert		{color: #FFFFFF; background-color: #008534; }
.FondVertPale   {color: #FFFFFF; background-color: #CCFFCC; }

/********************************************************************************* Champs INPUT */
.input {
	text-decoration: none;
	text-align: left;
	border: 2px solid #20517E;		/* Bleu foncé */	
	background-color: #CCFFFF;		/* Bleu pâle */
	-moz-border-radius: 5px; 		/* Je déteste les coins carrés */
	border-radius: 5px; 
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #20517E; 				/* Texte en Bleu foncé */
}
.inputBF {
	text-decoration: none;
	text-align: left;
	border: 2px solid #20517E;		/* Bleu foncé */	
	background-color: #CCFFFF;		/* Bleu pâle */
	-moz-border-radius: 5px; 		/* Je déteste les coins carrés */
	border-radius: 5px; 
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	color: #20517E; 				/* Texte en Bleu foncé */
}
.inputCentre {
	text-decoration: none;
	text-align: center;
	border: 2px solid #20517E;		/* Bleu foncé */	
	background-color: #CCFFFF;		/* Bleu pâle */
	-moz-border-radius: 5px; 		/* Je déteste les coins carrés */
	border-radius: 5px; 
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #20517E; 				/* Texte en Bleu foncé */
}
.inputDate {
	text-decoration: none;
	text-align: center;
	width: 105px;
	border: 2px solid #20517E;		/* Bleu foncé */	
	background-color: #CCFFFF;		/* Bleu pâle */
	-moz-border-radius: 5px; 		/* Je déteste les coins carrés */
	border-radius: 5px; 
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	color: #20517E; 				/* Texte en Bleu foncé */
}
.inputPhoto {
	text-decoration: none;
	text-align: left;
	border: 2px solid #20517E;		/* Bleu foncé */	
	background-color: #20517E;		/* Bleu foncé */	
	border-radius: 5px; 			/* Je déteste les coins carrés */
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF 					/* Texte en Blanc */
}
.inputListe {
	text-decoration: none;
	text-align: left;
	border: 2px solid #20517E;		/* Bleu foncé */		
	background-color: #CCFFFF;		/* Bleu pâle */
	-moz-border-radius: 5px; 		/* Je déteste les coins carrés */
	border-radius: 5px; 
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #20517E; 				/* Texte en Bleu foncé */
}
.inputRapido {
	text-align: center;
	background-color: #FFFFFF;		/* Blanc */
}

/********************************************************************************* Champs RADIO, PLACEHOLDER et CHECKBOX */
/* radio button before and after */
input[type='radio']:after {
	width: 12px;
	height: 12px;
	border-radius: 12px;
	margin: -1px;
	top: 1px;
	left: -1px;
	position: relative;
	background-color: #CCFFFF;		/* Bleu pâle */
	content: '';
	display: inline-block;
	visibility: visible;
	border: 2px solid #20517E;		/* Bleu foncé */
}
input[type='radio']:checked:after {
	top: 1px;
	left: -1px;
	position: relative;
	background-color: #20517E;		/* Bleu foncé */
	content: '';
	display: inline-block;
	visibility: visible;
	border: 2px solid #20517E;		/* Bleu foncé */
}

/* Checkbox button before and after */
input[type='checkbox']:after {
	width: 10px;
	height: 10px;
	top: -0px;
	left: -1px;
	position: relative;
	background-color: #CCFFFF;		/* Bleu pâle */
	content: '';
	display: inline-block;
	visibility: visible;
	border: 2px solid #20517E;		/* Bleu foncé */
}
input[type="checkbox"]:checked:after {
	top: -2px;
    height: 12px;
    width: 4px;
    border-left: 5px solid #FFFFFF;
    border-top: 0px solid #FFFFFF;
    border-bottom: 5px solid #20517E;
    border-right: 5px solid #20517E;
	background-color: #FFFFFF;		/* Blanc */
    transform: rotate(30deg);
}
input::placeholder {
	color: #000000;					/* Noir */
	background: #BFBFBF;			/* Gris moyen */
	font-size: 1em;
	font-style: italic;
	font-weight: bold;
}
	  
/********************************************************************************* Champs SELECT */
.select {	
	text-decoration: none;	
	text-align: left;	
	border: 2px solid #20517E;		/* Bleu foncé */		
	background-color: #CCFFFF;		/* Bleu pâle */	
	-moz-border-radius: 5px; 		/* Je déteste les coins carrés */	
	border-radius: 5px; 	
	font-family: Arial;	
	font-size: 15px;	
	font-weight: bold;	
	color: #20517E; 				/* Texte en Bleu foncé */ 	
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);	
	padding: 2px 3px;
	cursor: pointer;
}
.select option {	
	color: #E50B00; 				/* Texte en Rouge foncé */ 	
	background-color: #F5F5DC;		/* Beige */
	border: 2px solid #E50B00;		/* Rouge foncé */		
}

/********************************************************************************* Bouton SUBMIT */
.submit {
	text-decoration: none;
	text-align: center;
	border: 2px solid #20517E; 		/* Bleu foncé */
	background-color: #20517E;		/* Bleu foncé */
	border-radius: 5px; 			/* Je déteste les coins carrés */
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;					/* Texte en Blanc */	
}
.submit:hover {
	background-color: #FFFFFF;		/* Blanc */		
	color: #20517E; 				/* Texte en Bleu foncé */
}

.submitB {
	text-decoration: none;
	text-align: center;
	border: 2px solid #20517E; 		/* Bleu foncé */
	background-color: #20517E; 		/* Bleu foncé */ 	
	border-radius: 5px; 			/* Je déteste les coins carrés */
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;					/* Texte en Blanc */	
}
.submitB:hover {
	background-color: #FFFFFF;		/* Blanc */		
	color: #20517E; 				/* Bleu foncé */
}

.submitR {
	text-decoration: none;
	text-align: center;
	border: 2px solid #E50B00; 		/* Rouge foncé */
	background-color: #E50B00; 		/* Rouge foncé */ 	
	border-radius: 5px; 			/* Je déteste les coins carrés */
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;					/* Texte en Blanc */	
}
.submitR:hover {
	background-color: #FFFFFF;		/* Blanc */		
	color: #E50B00; 				/* Bleu foncé */
}

.submitV {
	text-decoration: none;
	text-align: center;
	border: 2px solid #008534; 		/* Vert */
	background-color: #008534; 		/* Vert */	
	border-radius: 5px; 			/* Je déteste les coins carrés */
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;					/* Texte en Blanc */	
}
.submitV:hover {
	background-color: #FFFFFF;		/* Blanc */		
	color: #008534; 				/* Vert */
}

/********************************************************************************* <table */
.table {
	margin: 5px;
	padding: 0px;
	border: 2px solid #20517E;		/* Bleu foncé */
	background-color: #FFFFFF;		/* Blanc */
	border-radius: 8px; 
}
.tableBPR {
	margin: 5px;
	padding: 0px;
	border: 2px solid #FF0000;		/* Rouge */
	background-color: #CCFFFF;		/* Bleu pâle */
	border-radius: 8px; 
}
.tableN {							/* Pour Nouvelles */
	border: 2px solid #E50B00;		/* Rouge foncé */
	background-color: #EEEEEE;		/* Gris pâle */
	border-radius: 8px; 
}
.tableRapido {						/* Pour Rapido */
	border: 2px solid #20517E;		/* Bleu foncé */
	background-color: #EEEEEE;		/* Gris pâle */
	border-radius: 8px; 
}
.tableBottom {						/* Pour htmlbottom.php seulement */
	border: 2px solid #20517E;		/* Bleu foncé */
	background-color: #20517E;		/* Bleu foncé */
	border-radius: 8px; 
}

/********************************************************************************* Champs INPUT pour TEXTARIA */
.textarea {
	border: 2px solid  ;			/* Bleu foncé */	
	background-color: #CCFFFF;		/* Bleu pâle */
	-moz-border-radius: 5px; 		/* Je déteste les coins carrés */
	border-radius: 5px; 
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
	color: #20517E; 				/* Texte en Bleu foncé */ 
	overflow-y: auto;
	word-wrap: break-word;
	height:auto;
	resize:vertical-auto; 			/* Enables vertical height due to size of contained text */ 
}	
textarea::placeholder {
	color: #000000;					/* Noir */
	background: #BFBFBF;			/* Gris moyen */
	font-size: 1em;
	font-style: italic;
}

/********************************************************************************* ZOOM de 50% sur MouseOver */
.zoom {
	width: 100px;
	height: 130px;
}
.image {
	width: 100%;
	height: 100%;
}
.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
	-webkit-transition: all 1s ease; 	/* Safari et Chrome */
	-moz-transition: all 1s ease; 		/* Firefox */
	-ms-transition: all 1s ease; 		/* Internet Explorer 9 */
	-o-transition: all 1s ease; 		/* Opera */
	transition: all 1s ease;
}
.image:hover img {
/* L'image double de taille si scale vaut 2.00 sinon, à 1.00 il n'y a aucun effet. */
	-webkit-transform:scale(1.00); 	/* Safari et Chrome */
	-moz-transform:scale(1.00); 	/* Firefox */
	-ms-transform:scale(1.00); 		/* Internet Explorer 9 */
	-o-transform:scale(1.00); 		/* Opera */
	transform:scale(1.00);
}

/********************************************************************************* Lien Accordéon dans BanqueDossiers_affiche */
.accordeon {
	background-color: #CCFFFF;	/* Bleu pâle */
	color: #E50B00;				/* Rouge foncé */
	cursor: pointer;
	padding: 2px;
	width: 100%;
	border: none;
	text-align: center;
	outline: none;
	font-size: 15px;
	transition: 0.4s;
}
.active, .accordeon:hover {
	background-color: #CCFFFF;	/* Bleu pâle */
	color: #36454F;				/* Charcoal */
}
.panelaccordeon {
	padding: 0 1px;
	display: none;
	background-color: white;
	color: #36454F;				/* Charcoal */
	overflow: hidden;
}

/************************************************************************************************************************************/