/*
# CSS Global - Guide de style

<h2>Comment utiliser ce guide</h2>

<h4>Nomenclature:</h4><ul>
	<li>Ce fichier est partagé dans tous les modules Omnivox, donc pas de css spécifique à un module dans ce fichier</li>
	<li>Le nom des CSS dans cette classe doivent **TOUJOURS** débuté par **Gen_**</li>
	<li>Bien commenter les ajouts afin qu'ils soient automatiquement ajouté à ce guide de style</li>
</ul><h4>Commentaire et Exemple</h4><ul>
	<li>Les commentaires doivent être fait en [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) et HTML directement dans le fichier CssGlobal.css</li>
	<li>
		Regrouper les exemples par catégorie
		<ul>
			<li>Les titres de catégories doivent être précédé de ## afin d'être dans le menus de navigation </li>
		</ul>
	</li>
	<li>Ajouter **&#37;DEPRECATED&#37;** dans un commentaire pour indiquer que ce css ne devrait plus être utilisé</li>
</ul><h4>Javascript</h4><ul>
	<li>
		Si vous voulez utiliser du javascript pour démontrer comment utiliser une fonctionnalité, vous pouvez vous déclarer des functions dans le fichier "**__D:\Omnivox\Projets\CSharp2.0\Skytech.Web.Setup.Configuration\Skytech.Web.Setup.Configuration\StyleGuide\js\scriptOmnivox.js__**", 
		mais on doit toujours faire une copie de ce Javascript et le mettre dans un tag **&lt;pre&gt;** sous notre exemple afin que tout le monde puisse facilement y accéder. **Voir les MessageBox pour un exemple**
	</li>
	<li>L'usage de tag **&lt;script&gt;** dans l'exemple est fortement déconseillé par soucis de propreté et puisque les **"** et les **'** sont remplacé automatiquement, brisant tout code javascript qui en utilise.</li>
</ul>

 */

@font-face {
	font-family: Roboto;
	src: url(/Content/Partage/CSS/fonts/Roboto/Roboto-Regular.eot); /* For IE6-8 */
	src: local('Roboto'), local('Roboto Regular'), local('Roboto-Regular'), url(/Content/Partage/CSS/fonts/Roboto/Roboto-Regular.woff2) format('woff2'), url(/Content/Partage/CSS/fonts/Roboto/Roboto-Regular.woff) format('woff'), url(/Content/Partage/CSS/fonts/Roboto/Roboto-Regular.ttf) format('truetype');
	font-display: swap;
}

div.HeaderContainer .HeaderOmnivox {
	height: 84px;
	overflow: hidden;
	border-bottom: 6px solid #ecf6fe;
}

div.HeaderContainer .HeaderOmnivoxFleur {
	z-index: 300;
	float: right;
	width: 148px;
	height: 123px;
}

	div.HeaderContainer .HeaderOmnivoxFleur > img {
		float: right;
	}

div.HeaderContainer .HeaderOmnivoxInfos {
	top: 0px;
	left: 0px;
	position: relative;
}

div.HeaderContainer .HeaderOmnivoxUser {
	padding-left: 18px;
	position: absolute;
	top: -21px;
	color: #000;
	font-weight: bold;
	font-size: 13px;
}

	div.HeaderContainer .HeaderOmnivoxUser.HeaderOmnivoxUserDaw {
		top: -25px;
		left: 200px;
	}

	div.HeaderContainer .HeaderOmnivoxUser .HeaderOmnivoxSuperUser {
		font-size: 10px;
	}

div.HeaderContainer .HeaderOmnivoxTest {
	font-family: Arial;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 28px;
	color: #b10808;
	position: absolute;
	top: -65px;
	left: 194px;
	cursor: default;
}

	div.HeaderContainer .HeaderOmnivoxTest.HeaderOmnivoxTestDaw {
		left: 325px;
	}

div.HeaderContainer .HeaderOmnivoxSousTitre {
	position: absolute;
	top: -36px;
	left: 18px;
	float: left;
	border-top: 2px solid #84b70f;
	color: #1b5a7e;
	font-size: 11px;
	font-family: arial,tahoma;
	font-weight: bold;
}

div.HeaderContainer .HeaderOmnivoxLiens {
	margin: 5px 0px 15px 0px;
}

div.HeaderContainer .HeaderOmnivoxLienDroit a,
div.HeaderContainer .HeaderOmnivoxLienGauche a {
	color: #3b3a3a;
	font-weight: bold;
	text-decoration: none;
}

	div.HeaderContainer .HeaderOmnivoxLienDroit a:hover,
	div.HeaderContainer .HeaderOmnivoxLienGauche a:hover {
		color: #b70404;
	}

div.HeaderContainer .HeaderOmnivoxLienDroit {
	float: right;
	margin-left: 35px;
	margin-right: 3px;
}

div.HeaderContainer .HeaderOmnivoxLienGauche {
	float: left;
	padding-left: 5px;
}

	div.HeaderContainer .HeaderOmnivoxLienDroit *,
	div.HeaderContainer .HeaderOmnivoxLienGauche * {
		/* Les float nous mettent toujours un vertical-align bottom qu'il faut compenser pour bien aligner le contenu */
		vertical-align: top;
	}

div.HeaderContainer .clearFloat {
	clear: both;
}

/*
<!-- Éléments génériques 
Section pour mettre le style qui s'applique aux tags HTML directement (img, span, div, html, etc.) 

Utiliser le moins possible-->
*/

img {
	border: 0;
}

html, body {
	margin: 0;
	padding: 0;
}

div.footer table
{
    width: 100%;
}

table tr td.tdFillEspace
{
    width: 100%;
}

/*
## Titres

	<h1>Titre de la page</h1>
	<h2>Titre de section</h2>
	<h3>Titre de sous-section</h3>
*/

body.CssGlobal {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	font-size: 13px;
	color: #000000;
	font-family: Arial;
	/*background-color: #ffffff;*/
}

	body.CssGlobal h1,
	body.CssGlobal h2,
	h1.TitreCssGlobal,
	h2.TitreCssGlobal,
	.sousTitreCssGlobal {
		margin: 0;
		margin-top: 3px;
		font-size: 26px;
		color: #308BE6;
		font-weight: normal;
		border: 0px;
		font-family: Helvetica light,Arial,sans-serif;
		letter-spacing: 1px;
		line-height: 1em;
		margin-bottom: 5px;
	}

	body.CssGlobal h2,
	h2.TitreCssGlobal,
	.Gen_Legende h2 {
		font-size: 20px;
		margin-left: -1px;
		margin-top: 10px;
		letter-spacing: 1px;
		color: #464646;
	}

.sousTitreCssGlobal {
	margin-left: -1px;
	margin-top: 1px;
	font-size: 20px;
	letter-spacing: normal;
}

/*
## Vieux Titres
%DEPRECATED%

	<div class="parent">
		<table class="Gen_TitrePage">
			<tr>
				<td>
					<div>
						Test de titre
					</div>
				</td>
			</tr>
		</table>
	</div>
	<div class="parent">
		<table class="Gen_TitrePageModule">
			<tr>
				<td>
					<div>
						Test de titre de module
					</div>
				</td>
			</tr>
		</table>
	</div>
*/

.Gen_TitrePage {
	border: 0;
	width: 100%;
	padding-bottom: 10px;
}

	.Gen_TitrePage tr td {
		vertical-align: middle;
	}

		.Gen_TitrePage tr td div {
			border-bottom: 1px solid #CCC;
			font-size: 17px;
			font-weight: bold;
			font-family: Arial;
			color: #AD1400;
		}


.Gen_TitrePageModule {
	padding-top: 10px;
	padding-bottom: 30px;
	text-align: center;
	font-weight: bold;
}

.Gen_TitrePageModule_Titre {
	font-size: 20px;
}

.Gen_TitrePageModule_SousTitre {
	font-size: 16px;
}

.Gen_TitrePageModule_SousTitre2 {
	font-size: 14px;
}

/*
##Positionnement
Permet de positionner des objets de type block dans leurs parents


<h4>Gen_Center_Div</h4>
	
Permet de centrer horizontalement un div par rapport à son parent

	<div class="parent">
		<h3 style="margin:0;">Parent</h3>
		<div style="width:200px;" class="enfant Gen_Center_Div">
			Div centré
		</div>
	</div>

<h4>Gen_Float_Right et Gen_Float_Left</h4>
	
Force l'élément à float:right ou float:left

	<div class="parent">
		<h3 style="margin:0;">Parent</h3>
		<div style="width:200px;" class="enfant Gen_Float_Left">
			Div float à gauche
		</div>
		<div style="width:200px;" class="enfant Gen_Float_Right">
			Div float à droite
		</div>
	</div>

<h4>Gen_Float_Clearfix</h4>

Permet de "reset" l'espace occupé par les éléments flotants. Il faut mettre cette classe au parent qui contient les éléments flottants.

Sans Gen_Float_Clearfix:

	<div class="parent">
		<h3 style="margin:0;">Parent</h3>
		<div>
			<div style="width:190px;border:1px solid red;" class="enfant Gen_Float_Left">
				Div float à gauche
			</div>
		</div>
		<div style="width:200px;border:1px solid green;" class="enfant">
			Contenu ici
		</div>
	</div>

Avec Gen_Float_Clearfix:

	<div class="parent">
		<h3 style="margin:0;">Parent</h3>
		<div class="Gen_Float_Clearfix">
			<div style="width:190px;border:1px solid red;" class="enfant Gen_Float_Left">
				Div float à gauche
			</div>
		</div>
		<div style="width:200px;border:1px solid green;" class="enfant">
			Contenu ici
		</div>
	</div>

<h4>Gen_Width_Max</h4>

Applique width:100% 

	<div class="parent">
		<h3 style="margin:0;">Parent</h3>
		<div class="enfant Gen_Width_Max">
			Div qui prend toute la largeur
		</div>
	</div>
*/
.Gen_Center_Div {
	margin:0 auto;
}

.Gen_Float_Right {
	float:right !important;
}

.Gen_Float_Left {
	float:left !important;
}

.Gen_Float_None {
    float: none !important;
}

.Gen_Float_Clearfix:after
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.Gen_Width_Max {
	width:100%;
}

/*
##Style de texte
<h4>Gen_Text_Ellipsis</h4>
	
Tronque le texte qui dépasse la largeur du parent.

**ATTENTION:** pour que cette classe fonctionne, on doit donner un width en px au div parent.
	
Il n'y a pas de width fix dans la classe pour qu'elle soit plus flexible.

	<div class="parent">
		<h3 style="margin:0;">Parent</h3>
		<div class="Gen_Text_Ellipsis enfant" >
			Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.
		</div>
	</div>
	
*/
.Gen_Text_Ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* 
##Menus de page

	<div class="Gen_MenuLateralGauche">
		<ul class="categorie">
			<li class="titre">
				Titre
			</li>
			<li class="item">
				Item base
			</li>
			<li class="link">
				<a href="#" >Item clickable</a>
			</li>
		</ul>
		<ul class="categorie">
			<li class="titre bold">
				Titre bold
			</li>
			<li class="item">
				<a href="#" >Item de menu 1</a>
			</li>
			<li class="link">
				<a href="#" >Lien de menu 1</a>
			</li>
		</ul>
	</div>

 */

.Gen_MenuLateralGauche {
	width: 150px;
	margin-top: 30px;
	margin-right: 20px;
	border-right: 1px solid #C9C9C9;
	padding-top: 10px;
	padding-bottom: 100px;
	float: left;
	font-family: 'Segoe UI', 'Segoe UI Web Regular', 'Segoe UI Symbol', 'Helvetica Neue', 'BBAlpha Sans', 'S60 Sans', Arial, sans-serif;
}

	.Gen_MenuLateralGauche .categorie {
		list-style-type: none;
		padding-left: 0px;
	}

	.Gen_MenuLateralGauche .item {
		font-size: 13px;
		display: block;
	}

	.Gen_MenuLateralGauche ul.categorie li.link,
	.Gen_MenuLateralGauche .item {
		padding-left: 30px;
		padding-right: 15px;
		padding-top: 10px;
		padding-bottom: 15px;
	}

		.Gen_MenuLateralGauche .item a {
			color: #797979;
		}

		.Gen_MenuLateralGauche ul.categorie li.link:hover,
		.Gen_MenuLateralGauche .item:hover {
			background-color: #eee9e9;
		}

			.Gen_MenuLateralGauche .item:hover a {
				color: #3A3A3A;
			}

	.Gen_MenuLateralGauche ul.categorie li.titre {
		padding-bottom: 15px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.Gen_MenuLateralGauche .categorie li.titre > a {
		color: #3A3A3A;
		font-size: 14px;
	}

	.Gen_MenuLateralGauche .categorie li.titre.bold > a,
	.Gen_MenuLateralGauche .categorie li.titre.bold {
		font-weight: bold;
	}
	
.Gen_BackToTop a {
	font-size: 12px;
	color: #797979 !important;
	position: fixed;
	bottom: 20px;
	right: 20px;
}

/*
##Instructions de page

	<div>
		<a id="GenInstruction" class="Gen_Btn_Instructions" href="javascript:Utils.ToggleAffichageInstructions('Cacher les instructions', 'Afficher les instructions');" title="Afficher les instructions">
			<div class="Gen_Titre_Btn_Instructions">Instructions</div>
			<div id="Desc_Btn_Instructions">Afficher les instructions</div>
		</a>
		<div class="Gen_div_Instructions" id="divInstruction" style="display:none;">
			Ceci est une instruction
			<ul>
				<li>On peu mettre n'importe quoi</li>
				<li>dans les instructions</li>
			</ul>
			même une image:
			<img src="/images/General/intrWPLienOrdi.gif" />
		</div>
	</div>


<h4>Javascript</h4>

Tout le code javascript se trouve dans Lib_General.js
<h4>messages dictios</h4>
<ul>
	<li>**Instructions:** ("COMMUN", "INSTRUCTIONS_TITRE")</li>
	<li>**Afficher les instructions:** ("COMMUN", "INSTRUCTIONS_AFFICHER")</li>
	<li>**Cacher les instructions:** ("COMMUN", "INSTRUCTIONS_CACHER")</li>
</ul>

<style>
	#divInstruction{display:none;}
</style>
*/
/*
##Vieille instruction de page

%DEPRECATED%

	<div class="Gen_Instructions_Titre divInstructions">
		<img class="imgExpandCollapse" src="/images/General/genBtnRetrecir.gif" />
	</div>
	<div class="lblInstructions Gen_Instructions_Detail">
		Detail de l'insctruction Detail de l'insctruction Detail de l'insctruction Detail de l'insctruction Detail de l'insctruction Detail de l'instruction Detail de l'insctruction
	</div>
	<div class="divFiltre">
		<div class="Gen_Titre_Section">
			<span class="Gen_Titre_Texte">Titre de section</span>
		</div>
		<div>
			Section
		</div>
	</div>	
*/

.Gen_Instructions_Titre {
	font-weight: bold;
	font-size: 11px;
}

.Gen_Instructions_Detail {
	font-size: 11px;
}

.Gen_Instruction_RadioCheck {
	padding-left: 22px;
	width: 450px;
}

div div.Gen_Instruction_RadioCheck {
	margin-left: 3px;
}

.Gen_Titre_Section {
	background-image: url(/images/General/separateur.gif);
	background-repeat: repeat-x;
	background-position: center left;
	margin-top: 20px;
}

	.Gen_Titre_Section .Gen_Titre_Texte {
		padding-right: 3px;
		padding-left: 0px;
		font-weight: bold;
		font-size: 15px;
		padding-bottom: 3px;
		color: #25517c;
		padding-top: 3px;
		background-color: #ffffff;
	}

.Gen_Instructions_Section {
	font-size: 11px;
}


.Gen_div_Instructions, .Gen_Btn_Instructions {
	padding-left: 30px;

}


.Gen_Btn_Instructions {
	display: block;
	background-image: url(/images/General/BtnInstructions.png);
	background-position: 0px 3px;
	background-repeat: no-repeat;
	margin-top: 15px;
	width: 150px;
	color: #0292FF;
	height: 30px;
	border: 0;
	text-decoration:none;
}

	.Gen_Btn_Instructions .Gen_Titre_Btn_Instructions {
		font-weight: bold;
	}

/*
##Table

<h4>Table légende</h4>
<h4>Table AddSet</h4>
<h4>Table Boutton bas de page</h4>


TODO
*/
.Gen_DataTable {
	font-size: 13px;
	padding: 0px;
	border: 0px;
	width: 740px;
}


	.Gen_DataTable thead {
		font-size: 13px;
		background-color: #BBBBBB;
		color: black;
		font-weight: bold;
	}

		.Gen_DataTable thead th {
			padding: 5px;
			text-align: left;
		}

	.Gen_DataTable tbody td {
		padding: 5px;
	}

.Gen_divAucuneDonnee {
	border: 1px solid black;
	font-weight: bold;
	height: 100px;
	margin: 0 auto;
	padding: 5px;
	width: 450px;
}

	/*
## Légende

Avec un div _(manière moderne)_:

	<div class="Gen_Legende">
		<h2>Légende</h2>
		<dl>
			<dt><img src="/images/General/Alert_Success.png" width="20px"></dt>
			<dd>Indique que l'élément est disponible pour ce cours</dd>

			<dt><img src="/images/General/hyphen.gif" width="20px"></dt>
			<dd>Indique que l'élément n'est pas disponible pour ce cours</dd>
		</dl>
	</div>

Avec un table _(manière oldschool)_:

	<table class="Gen_Legende">
		<tr>
			<td colspan="2">
				<h2>Légende</h2>
			</td>
		</tr>
		<tr>
			<td><img src="/images/General/Alert_Success.png" width="20px"></td>
			<td>Indique que l'élément est disponible pour ce cours</td>
		</tr>
		<tr>
			<td><img src="/images/General/hyphen.gif" width="20px"></td>
			<td>Indique que l'élément n'est pas disponible pour ce cours</td>
		</tr>
	</table>

	*/

div.Gen_Legende {
	display:inline-block;
}

table.Gen_Legende tr:first-child td h2,
div.Gen_Legende h2 {
	padding-top: 0;
	padding-bottom: 5px;
	border-bottom: 1px solid #464646;
}

table.Gen_Legende tr:first-child td {
	padding-bottom: 10px;
}

table.Gen_Legende tr td,
div.Gen_Legende dl dt,
div.Gen_Legende dl dd  {
	padding: 5px;
	padding-bottom: 0;
	vertical-align: top;
}

div.Gen_Legende dl dt {
    float: left;
	clear: left;
}

div.Gen_Legende dl dd {
    float: left;
	margin-left: 0;
}


/*
## Vielle légende
%DEPRECATED%

	<table class="Gen_tblLegende">
		<tr>
			<td class="Gen_TitreLegende" colspan="2">La vieille légende raconte</td>
		</tr>
		<tr>
			<td class="Gen_TDImage">
				<img alt="Une image" SRC="/images/general/imgTutoratInvitation.png" />
			</td>
			<td class="Gen_Titre_DetailLegende">
				Il était une fois
				<div class="Gen_Detail_Legende">un étudiant</div>
			</td>
		</tr>
	</table>

*/

.Gen_tblLegende {
}
	.Gen_tblLegende .Gen_TitreLegende {
		font-weight: bold;
		font-size: 14px;
		color: #000000;
		font-family: arial;
		border-bottom: 1px solid #000000;
	}

	.Gen_tblLegende .Gen_Titre_DetailLegende {
		color: #444444;
		font-size: 11px;
		font-weight: bold;
	}

	.Gen_tblLegende .Gen_Detail_Legende {
		color: #141414;
		font-family: arial;
		font-size: 11px;
		font-weight: normal;
	}

/*
<!-- [F25855] 2014-07-11, Maxime Saindon-Turcotte: on ajoute Gen_table pour remplacer les cellspacing et les cellpadding qui sont deprecated dans le style des tables en HTML5  -->*/

.Gen_Table {
	border-collapse: collapse;
}


	table.Gen_Table td, table.Gen_table th {
		padding: 0;
	}

.Gen_Table_AddSet {
	width: 100%;
	font-size: 13px;
	font-family: Arial;
	margin-top: 10px;
	margin-bottom: 35px;
}



	.Gen_Table_AddSet .Gen_Td_Colonne_Gauche {
		padding-top: 5px;
		padding-bottom: 10px;
		font-weight: bold;
		width: 175px;
		vertical-align: top;
		padding-left: 20px;
	}

		.Gen_Table_AddSet .Gen_Td_Colonne_Gauche label {
			vertical-align: top;
		}

		.Gen_Table_AddSet .Gen_Td_Colonne_Gauche span,
		.Gen_ExplicationChamp {
			font-weight: normal;
			font-size: 11px;
			color: #141414; /*Demande de Phil, nous allons les changer dans tous les modules pour le mettre gris*/
			font-family: Arial, Helvetica;
		}

	.Gen_Table_AddSet .Gen_Td_Colonne_Droite {
		padding-top: 5px;
		padding-bottom: 10px;
		padding-left: 20px;
		font-size: 12px;
		vertical-align: top;
	}


	.Gen_Table_AddSet .Gen_Td_Colonne_Droite_TitreRadio {
		font-size: 12px;
	}

	.Gen_Table_AddSet .Gen_Td_Colonne_Droite_DetailRadio {
		font-size: 11px;
		color: #25517c;
	}

	.Gen_Instruction,
	.Gen_Table_AddSet .Gen_Instruction,
	.field-description,
	.Gen_Table_AddSet .field-description {
		font-weight: normal;
		font-size: 11px;
		color: #141414;
		text-align: left;
	}

.Gen_Table_Onglet {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	width: 100%;
}


div.Gen_Instruction {
	margin-left: 3px;
}

div .Gen_Instruction {
	margin-left: 0px;
}

	div.Gen_Instruction .Instructions_Detail {
		padding-left: 30px;
	}

.Gen_Table_Button_Bottom {
	margin-top: 20px;
	width: 100%;
}

	.Gen_Table_Button_Bottom td {
		padding-top: 5px;
	}

	
	.Gen_Table_Button_Bottom .Gen_Table_Button_Bottom_Top {
	/*<!--  Annie: 2010-08-19 - [B21542] - J'ai retiré le width: 300px car fuckait l'affichage des boutons en IE  -->*/
		border-top: 1px solid #CCC;
	}

	.Gen_Table_Button_Bottom .Gen_Lien_Retour {
		font-weight: bold;
		font-size: 12px;
		color: #25517c;
		font-family: arial;
		text-decoration: none;
	}

div.Gen_Tr_Border_Top_Btn,
.Gen_Tr_Border_Top_Btn td {
	border-top: 1px solid #CCC;
}

/*Christophe G. 2016-04-01 - [B65954] Permet de clear automatiquement les floats des boutons après la div de bouton (Il n'y a pas ce problème avec les table)*/
div.Gen_Tr_Border_Top_Btn:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.Gen_Fleche_Retour {
	background: url(/images/General/FlecheRetour.gif) no-repeat left center;
	padding-left: 15px;
	color: green;
	font-weight: bold;
	margin-top: 5px;
}

.Gen_InstructionsCollapsable {
	overflow: auto;
}

	.Gen_InstructionsCollapsable .InstructionCollapsable_Titre {
		background: url(/Images/General/BtnRetrecirLea.gif) no-repeat right center;
		padding-right: 15px;
		font-size: 11px;
		color: #444444;
		font-weight: bold;
		cursor: pointer;
		float: left;
	}

		.Gen_InstructionsCollapsable .InstructionCollapsable_Titre:hover {
			background: url(/Images/General/BtnRetrecirLea_ov.gif) no-repeat right center;
		}

	.Gen_InstructionsCollapsable.Collapsed .InstructionCollapsable_Titre {
		background: url(/Images/General/BtnAgrandirLea.gif) no-repeat right center;
	}

		.Gen_InstructionsCollapsable.Collapsed .InstructionCollapsable_Titre:hover {
			background: url(/Images/General/BtnAgrandirLea_ov.gif) no-repeat right center;
		}

	.Gen_InstructionsCollapsable .InstructionCollapsable_Texte {
		color: #444444;
		font-size: 11px;
		font-weight: normal;
		clear: left;
	}

	.Gen_InstructionsCollapsable.Collapsed .InstructionCollapsable_Texte {
		display: none;
	}



/*
##Boutons génériques
Tous les styles de boutons de bases

NOTE: Dans cet exemple, afin que les boutons ne soit pas placé n'importe comment, on applique une classe "reset-btn" qui n'est pas dans le CssGlobal et qui permet de donner une consistence aux boutons
	
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnContinuer">Continuer</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnContinuerEtAjouter">Continuer et ajouter</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnNextStep">Next Step</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnConsulter">Consulter</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnPayer">Payer</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnAjouter">Ajouter</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnAction">Action</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnActionUpload">Upload</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnActionDownload">Download</a>
    <a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnCourriel">Courriel</a>
    <a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnLock">Lock</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnImprimer">Imprimer</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnEnvoyer">Envoyer</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnRechercher">Rechercher</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnModifier">Modifier</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnCalendrier">Calendrier</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnAction Gen_BtnHistoriqueTransaction">Historique Transaction</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnAction Gen_BtnStats">Stats</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnOnglet">Onglet</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnAnnuler">Annuler</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnMoveUp">Up</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnMoveDown">Down</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnPrecedent">Precedent</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnSuivant">Suivant</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnNeutre">Neutre</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnSupprimer">Supprimer</a>
	<a class="Gen_Float_Left Gen_Btn reset-btn Gen_BtnPower">Déconnexion</a>
	
<h4>Dans un tableau</h4>

<ul>
<li>Annuler toujours le plus à droite</li>
<li>Précédent toujours à gauche</li>
<li>Laisser un margin de 50px entre Supprimer et Continuer</li>
<li>Toujours mettre une ligne en haut des boutons (classe appliqué sur le tr)</li>
</ul>

	<table class="Gen_Table">
		<tr>
			<td>
				Contenu de tableau
			</td>
		</tr>
		<tr class="Gen_Tr_Border_Top_Btn">
			<td>
				<a class="Gen_Btn Gen_BtnAnnuler">Annuler</a>
				<a class="Gen_Btn Gen_BtnContinuer">Continuer</a>
				<a class="Gen_Btn Gen_BtnSupprimer">Supprimer</a>
				<a class="Gen_Float_Left Gen_Btn Gen_BtnPrecedent">Precedent</a>
			</td>
		</tr>
	</table>
	
<!-- [F29472] 2015-07-14, Christophe Carreau:	Ici j'ai mis des '!important' parce que lorsqu'on ajoute cette classe, on veut override les autres classes CSS -->*/



/*
	<!-- Gen_Btn (pour tout les boutons) -->
*/
.Gen_Btn {
	font-family: Helvetica Bold,Arial,sans-serif;
	display: block;
	float: right;
	background-position: 5px 50%;
	background-repeat: no-repeat;
	color: #303030;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	margin: 10px;
	margin-right: 0px;
	margin-left: 20px;
	margin-bottom: 0px;
	padding: 12px 20px 12px 32px;
	border: 0;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	border-radius: 0;
}

	.Gen_Btn:visited {
		color: white;
	}

	.Gen_Btn:hover {
		color: #000;
		text-decoration: none;
	}

.Gen_Btn.large
{
	font-size: 1.8em;
	font-weight: normal;
	padding: 8px 20px 8px 64px;
	background-position-x: 12px;
}

.Gen_Btn_Inactif {
	background-color: #888;
}

.Gen_Btn .Gen_Instruction {
	color: #fff;
	color: rgba(255, 255, 255, 0.75);
	margin-left: 0px;
}


input.Gen_Btn::-moz-focus-inner {
/*<!-- [62315] 15 juin 2015 - ChristopheG: Permet que les bouttons aient la même hauteur peu importe si c'est un lien ou un input, sur Firefox  -->*/
	border: 0;
	padding: 0;
}

.Gen_Btn_AutoWidth
{
	display:inline-block !important;
	width:auto !important;
}


/*<!--

	 style particulier pour chaque bouton (float, margin, padding, width)

-->*/

.Gen_BtnOnglet {
	margin-right: 0px;
	margin-left: 0px;
	padding: 12px 0px;
	float: none;
	width: 175px;
	text-align: center;
}

.Gen_BtnOnglet_Selectionne {
	cursor: default;
}

.Gen_BtnActionNonFix,
.Gen_BtnActionUploadNonFix,
.Gen_BtnActionDownloadNonFix,
.Gen_BtnCourrielNonFix,
.Gen_BtnLockNonFix,
.Gen_BtnAjouterNonFix,
.Gen_BtnImprimerNonFix,
.Gen_BtnRechercherNonFix,
.Gen_BtnModifieNonFix,
.Gen_BtnAction_InactifNonFix,
.Gen_BtnActionUpload_InactifNonFix,
.Gen_BtnActionDownload_InactifNonFix,
.Gen_BtnCourriel_InactifNonFix,
.Gen_BtnLock_InactifNonFix,
.Gen_BtnImprimer_InactifNonFix,
.Gen_BtnRechercher_InactifNonFix {
	margin-right: 0px;
	margin-left: 0px;
	padding: 12px 20px 12px 35px;
	float: none;
}

.Gen_BtnSupprimer,
.Gen_BtnSupprimer_Inactif {
	margin-right: 50px;
}

.Gen_BtnAnnuler,
.Gen_BtnAnnuler_Inactif {
	padding-left: 20px;
	border: 0;
}


.Gen_BtnCalendrier {
	margin: 0;
}

.Gen_BtnHistoriqueTransaction {
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	padding-left: 28px;
	width: auto;
}

.Gen_BtnPayer {
	margin-left: 0;
	margin-top: 0;
	float: none;
	width: 53px;
}

.Gen_BtnEnvoyer {
	margin-left: 0;
	float: none;
}


.Gen_BtnPrecedent,
.Gen_BtnSuivant,
.Gen_BtnMoveUp,
.Gen_BtnMoveDown,
.Gen_BtnPrecedent_Inactif,
.Gen_BtnSuivant_Inactif,
.Gen_BtnMoveUp_Inactif,
.Gen_BtnMoveDown_Inactif {
	border: 0;
	margin-right: 40px;
	margin-left: 0px;
}


.Gen_BtnMoveDown,
.Gen_BtnMoveUp,
.Gen_BtnMoveDown_Inactif,
.Gen_BtnMoveUp_Inactif {
	margin-right: 5px;
	width: 15px;
	padding-top: 6px;
}

.Gen_BtnNeutre,
.Gen_BtnNeutre_Inactif {
	padding-left: 20px;
}

.Gen_BtnAction,
.Gen_BtnActionUpload,
.Gen_BtnActionDownload,
.Gen_BtnCourriel,
.Gen_BtnLock,
.Gen_BtnAjouter,
.Gen_BtnRafraichir,
.Gen_BtnImprimer,
.Gen_BtnRechercher,
.Gen_BtnModifier,
.Gen_BtnAction_Inactif,
.Gen_BtnActionUpload_Inactif,
.Gen_BtnActionDownload_Inactif,
.Gen_BtnCourriel_Inactif,
.Gen_BtnLock_Inactif,
.Gen_BtnImprimer_Inactif,
.Gen_BtnRechercher_Inactif,
.Gen_BtnActionChangerUpload,
.Gen_BtnActionRotate {
	margin-right: 0px;
	margin-left: 0px;
	padding: 12px 20px 12px 35px;
	float: none;
	width: 105px;
}

.Gen_BtnLink {
	margin-right: 0px;
	margin-left: 0px;
	padding: 12px 20px 12px 35px;
	float: none;
	width: 30px;
}

.Gen_BtnAnnuler,
.Gen_BtnAnnuler_Inactif
{
	  padding-left: 20px;
}

.Gen_BtnAfficherPlus {
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	padding-left: 32px;
	width: auto;
}

/*
	<!-- hover -->
*/

.Gen_BtnAction:hover,
.Gen_BtnActionUpload:hover,
.Gen_BtnActionDownload:hover,
.Gen_BtnCourriel:hover,
.Gen_BtnLock:hover,
.Gen_BtnAjouter:hover,
.Gen_BtnLink:hover,
.Gen_BtnRafraichir:hover,
.Gen_BtnImprimer:hover,
.Gen_BtnRechercher:hover,
.Gen_BtnModifier:hover,
.Gen_BtnCalendrier:hover,
.Gen_BtnAfficherPlus:hover,
.Gen_BtnActionRotate:hover,
.Gen_BtnActionNonFix:hover,
.Gen_BtnActionUploadNonFix:hover,
.Gen_BtnActionDownloadNonFix:hover,
.Gen_BtnCourrielNonFix:hover,
.Gen_BtnLockNonFix:hover,
.Gen_BtnAjouterNonFix:hover,
.Gen_BtnImprimerNonFix:hover,
.Gen_BtnRechercherNonFix:hover,
.Gen_BtnModifierNonFix:hover {
	background-color: #5BABFD;/*Bleu pale*/
}

.Gen_BtnContinuer:hover,
.Gen_BtnPayer:hover,
.Gen_BtnContinuerEtAjouter:hover,
.Gen_BtnConsulter:hover,
.Gen_BtnNextStep:hover {
	background-color: #33AD47;/*Vert pale*/
}

.Gen_BtnMoveDown:hover,
.Gen_BtnMoveUp:hover,
.Gen_BtnPrecedent:hover,
.Gen_BtnSuivant:hover,
.Gen_BtnAnnuler:hover {
	background-color: #D0D0D0;/*Gris pale*/
}

.Gen_BtnNeutre:hover {
	background-color: #D9D9D9;/*Gris + pale*/
	color: #131313;
}

.Gen_BtnSupprimer:hover,
.Gen_BtnPower:hover,
.Gen_BtnRafraichirDanger:hover {
	background-color: #FF6E6E;/*Rouge pale*/
}

.Gen_BtnActionChangerUpload:hover {
	background-color: #FF993F; /* Orange pale */
}

/*
	<!-- Images -->
*/

.Gen_BtnAction,
.Gen_BtnAction_Inactif,
.Gen_BtnActionNonFix,
.Gen_BtnAction_InactifNonFix {
	background-image: url('/Images/Boutons/action.png');
}

.Gen_BtnActionUpload,
.Gen_BtnActionUpload_Inactif {
	background-image: url('/Images/Boutons/upload.png');
}

.Gen_BtnActionDownload,
.Gen_BtnActionDownload_Inactif {
	background-image: url('/Images/Boutons/download.png');
}

.Gen_BtnCourriel,
.Gen_BtnCourrielNonFix,
.Gen_BtnCourriel_Inactif,
.Gen_BtnCourriel_InactifNonFix {
    background-image: url('/Images/Boutons/courriel.png');
}

.Gen_BtnLock,
.Gen_BtnLockNonFix,
.Gen_BtnLock_Inactif,
.Gen_BtnLock_InactifNonFix {
    background-image: url('/Images/Boutons/lock.png');
}

.Gen_BtnAjouter,
.Gen_BtnAjouter_Inactif {
	background-image: url('/Images/Boutons/add.png');
}

.Gen_BtnLink,
.Gen_BtnLink_Inactif {
	background-image: url('/Images/Boutons/imgLink.png');
}

.Gen_BtnRafraichir,
.Gen_BtnRafraichir_Inactif,
.Gen_BtnRafraichirDanger,
.Gen_BtnRafraichirDanger_Inactif {
	background-image: url('/Images/Boutons/refresh.png');
}

.Gen_BtnStats {
	background-image: url('/Images/Boutons/stats.png');
}

.Gen_BtnConsulter,
.Gen_BtnConsulter_Inactif {
	background-image: url('/Images/Boutons/imgConsulter.png');
}

.Gen_BtnConsulter.large,
.Gen_BtnConsulter_Inactif.large {
	background-image: url('/Images/Boutons/imgConsulterLarge.png');
}

.Gen_BtnMoveUp,
.Gen_BtnMoveUp_Inactif {
	background-image: url('/Images/Boutons/moveUp.png');
}

.Gen_BtnMoveDown,
.Gen_BtnMoveDown_Inactif {
	background-image: url('/Images/Boutons/moveDown.png');
}

.Gen_BtnPrecedent,
.Gen_BtnPrecedent_Inactif {
	background-image: url('/Images/Boutons/precedent.png');
}

.Gen_BtnSuivant,
.Gen_BtnSuivant_Inactif {
	background-image: url('/Images/Boutons/suivant.png');
}

.Gen_BtnNextStep {
	background-image: url('/Images/Boutons/Next.png');
}

.Gen_BtnImprimer,
.Gen_BtnImprimer_Inactif {
	background-image: url('/Images/Boutons/print.png');
}

.Gen_BtnRechercher,
.Gen_BtnRechercher_Inactif,
.Gen_BtnRechercherNonFix,
.Gen_BtnRechercher_InactifNonFix {
	background-image: url('/Images/Boutons/search.png');
}

.Gen_BtnModifier,
.Gen_BtnModifier_Inactif {
	background-image: url('/Images/Boutons/edit.png');
}
.Gen_BtnSupprimer,
.Gen_BtnSupprimer_Inactif,
.Gen_BtnActionChangerUpload {
	background-image: url("/Images/Boutons/Cancel.png");
}
.Gen_BtnPower{
	background-image: url("/Images/Boutons/power.png");
}

.Gen_BtnContinuer,
.Gen_BtnContinuer_Inactif {
	background-image: url('/Images/Boutons/Continuer.png');
}
.Gen_BtnContinuerEtAjouter,
.Gen_BtnContinuerEtAjouter_Inactif {
	background-image: url('/Images/Boutons/ContinuerEtPlus.png');
}
.Gen_BtnEnvoyer {
	background-image: url("/Images/Boutons/mail.png");
}
.Gen_BtnPayer {
	background-image: url("/Images/Boutons/dollar.png");
}
.Gen_BtnHistoriqueTransaction {
	background-image: url('/Images/Boutons/Historique.png');
}
.Gen_BtnCalendrier {
	background-image: url("/Images/Boutons/calendar.png");
}
.Gen_BtnAfficherPlus{
	background-image: url('/Images/Boutons/moveDown.png');
}

.Gen_BtnActionRotate {
	background-image: url('/Images/Boutons/rotate.png');
}

/*
	<!-- Bouton rouge -->
*/

.Gen_BtnSupprimer,
.Gen_BtnPower,
.Gen_BtnRafraichirDanger
{
	background-color: #FF4A4A;
	color: #FFFFFF;
}


/*
	<!-- Bouton vert -->
*/

.Gen_BtnNextStep,
.Gen_BtnContinuer,
.Gen_BtnContinuerEtAjouter,
.Gen_BtnConsulter,
.Gen_BtnPayer
{
	background-color: #00991A;
	color: #fff;
}

/*
	<!-- Bouton gris -->
*/
.Gen_BtnOnglet,
.Gen_BtnAnnuler,
.Gen_BtnPrecedent,
.Gen_BtnSuivant,
.Gen_BtnMoveUp,
.Gen_BtnMoveDown,
.Gen_BtnNeutre
{
	background-color: #B0B0B0;
	color: #131313;
}


/*
	<!-- Bouton bleu -->
*/

.Gen_BtnAction,
.Gen_BtnActionUpload,
.Gen_BtnActionDownload,
.Gen_BtnCourriel,
.Gen_BtnLock,
.Gen_BtnAjouter,
.Gen_BtnLink,
.Gen_BtnRafraichir,
.Gen_BtnImprimer,
.Gen_BtnRechercher,
.Gen_BtnModifier,
.Gen_BtnOnglet_Selectionne,
.Gen_BtnCalendrier,
.Gen_BtnHistoriqueTransaction,
.Gen_BtnEnvoyer,
.Gen_BtnAfficherPlus,
.Gen_BtnActionRotate,
.Gen_BtnActionNonFix,
.Gen_BtnActionUploadNonFix,
.Gen_BtnActionDownloadNonFix,
.Gen_BtnCourrielNonFix,
.Gen_BtnLockNonFix,
.Gen_BtnAjouterNonFix,
.Gen_BtnImprimerNonFix,
.Gen_BtnRechercherNonFix,
.Gen_BtnModifieNonFix
{
	background-color: #3297FD;
	color: #fff;
}

/*
	<!-- Bouton orange -->
*/
.Gen_BtnActionChangerUpload
{
	background-color: #FF8000;
	color: #fff;
}


/*
	<!-- Inactif -->
*/

.Gen_BtnPrecedent_Inactif,
.Gen_BtnSuivant_Inactif,
.Gen_BtnMoveUp_Inactif,
.Gen_BtnMoveDown_Inactif,
.Gen_BtnContinuer_Inactif,
.Gen_BtnContinuerEtAjouter_Inactif,
.Gen_BtnConsulter_Inactif,
.Gen_BtnContinuer_Inactif:hover,
.Gen_BtnContinuerEtAjouter_Inactif:hover,
.Gen_BtnConsulter_Inactif:hover,
.Gen_BtnPrecedent_Inactif,
.Gen_BtnPrecedent_Inactif:hover,
.Gen_BtnSuivant_Inactif,
.Gen_BtnSuivant_Inactif:hover,
.Gen_BtnAnnuler_Inactif,
.Gen_BtnAnnuler_Inactif:hover 
.Gen_BtnAction_Inactif,
.Gen_BtnActionUpload_Inactif,
.Gen_BtnActionDownload_Inactif,
.Gen_BtnCourriel_Inactif,
.Gen_BtnLock_Inactif,
.Gen_BtnAjouter_Inactif,
.Gen_BtnLink_Inactif,
.Gen_BtnRafraichir_Inactif,
.Gen_BtnContinuer_Inactif,
.Gen_BtnContinuerEtAjouter_Inactif,
.Gen_BtnImprimer_Inactif,
.Gen_BtnRechercher_Inactif,
.Gen_BtnModifier_Inactif,
.Gen_BtnConsulter_Inactif,
.Gen_BtnAction_InactifNonFix,
.Gen_BtnActionUpload_InactifNonFix,
.Gen_BtnActionDownload_InactifNonFix,
.Gen_BtnCourriel_InactifNonFix,
.Gen_BtnLock_InactifNonFix,
.Gen_BtnAjouter_InactifNonFix,
.Gen_BtnContinuer_InactifNonFix,
.Gen_BtnContinuerEtAjouter_InactifNonFix,
.Gen_BtnImprimer_InactifNonFix,
.Gen_BtnRechercher_InactifNonFix,
.Gen_BtnModifier_InactifNonFix,
.Gen_BtnAction_InactifNonFix:hover,
.Gen_BtnActionUpload_InactifNonFix:hover,
.Gen_BtnActionDownload_InactifNonFix:hover,
.Gen_BtnCourriel_InactifNonFix:hover,
.Gen_BtnLock_InactifNonFix:hover,
.Gen_BtnAjouter_InactifNonFix:hover,
.Gen_BtnContinuer_InactifNonFix:hover,
.Gen_BtnContinuerEtAjouter_InactifNonFix:hover,
.Gen_BtnImprimer_InactifNonFix:hover,
.Gen_BtnRechercher_InactifNonFix:hover,
.Gen_BtnModifier_InactifNonFix:hover,
.Gen_BtnAction_Inactif:hover,
.Gen_BtnActionUpload_Inactif:hover,
.Gen_BtnActionDownload_Inactif:hover,
.Gen_BtnCourriel_Inactif:hover,
.Gen_BtnLock_Inactif:hover,
.Gen_BtnAjouter_Inactif:hover,
.Gen_BtnLink_Inactif:hover,
.Gen_BtnRafraichir_Inactif:hover,
.Gen_BtnContinuer_Inactif:hover,
.Gen_BtnContinuerEtAjouter_Inactif:hover,
.Gen_BtnImprimer_Inactif:hover,
.Gen_BtnRechercher_Inactif:hover,
.Gen_BtnModifier_Inactif:hover,
.Gen_BtnConsulter_Inactif:hover,
.Gen_BtnOnglet_Inactif,
.Gen_BtnOnglet_Inactif:hover,
.Gen_BtnSupprimer_Inactif,
.Gen_BtnSupprimer_Inactif:hover,
.Gen_BtnRafraichirDanger_Inactif,
.Gen_BtnRafraichirDanger_Inactif:hover,
/*<!-- Utiliser cette classe au lieu d'en créer une pour chaque bouton -->*/
.Gen_Btn.Gen_BtnInactif,
.Gen_Btn.Gen_BtnInactif:hover {
	cursor: default;
	background-color: #D5D5D5;
	color: #777;
}


/*
##Footer

TODO
*/

#Gen_Footer {
	border-top: 1px solid #c9c9c9;
	background-color: #fff;
	text-align: right;
	height: 60px;
	width: 100%;
	padding-bottom: 1px;
}

.Gen_FooterAbsolute {
	position: absolute;
	left: 0;
    right: 0;
	z-index: 1;
} 

.Gen_FooterFixed {
	position: fixed;
	bottom: 0px;
	z-index: 998;
	padding-bottom: 10px;
}


.divSpinnerPopup, #divSpinnerPopup {
	text-align: center;
	position: relative;
}

#spinnerPopup {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
}

#iframePopup, #iframeSecondPopup {
	border: 0;
	display: none;
}

#popupContainer.popup {
	z-index: 2000;
	position: absolute;
	margin-left: 0px;
	border: 1px solid #838383;
}


.popup {
	border: 1px solid #c4e3f3;
	background-color: #ffffff;
	padding: 10px 10px 0;
	margin-top: 20px;
	box-shadow: 0 0 15px -1px rgba(50, 50, 50, 0.75);
	-webkit-box-shadow: 0 0 15px -1px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0 0 15px -1px rgba(50, 50, 50, 0.75);
	margin-left: 20px;
}

.ui-widget-overlay {
	/* Position absolute pour que ça apparaisse sur tout l'écran, et pas jsute dans le iframe (Problème dans LÉA sinon). */
	/* Christophe G. 2016-05-06 - [F31506] Position fixed pour que ça marche même si le popup est plus grand que la page (Testé et fonctionnel dans LÉA (Vidéos)) */
	position: fixed;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/* Christophe G. 2016-05-06 - [F31506] Background image vraiment useless, on l'override plus bas dans tout les cas */
	/*background: url('/Images/General/blank1.gif');*/
	/* On fait tout ce qu'on peut pour forcer le HasLayout pour IE. Si le HasLayout n'est pas trigger, certaine propriété CSS ne pourra pas être exécuté. */
	width: 100%;
	zoom: 1;
	/* Pour IE8 et 9 Doit être AVANT filter */
	/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	
	filter: alpha(opacity=1);*/
	/* Older than Firefox 0.9 */
	/*-moz-opacity:0.01;*/
	/* Safari 1.x (pre WebKit!) */
	/*-khtml-opacity: 0.01;*/
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	/*opacity: 0.01;*/

	background: #666666;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}


.ui-dialog {
	position: absolute;
	overflow: hidden;
	z-index: 1005;
}

.no-titlebar .ui-dialog-titlebar {
	display: none;
}


.Gen_TabPagination {
	width: 75%;
	text-align: center;
	border-top: 1px solid lightgray;
	height: 55px;
}

.Gen_TdPaginationItem {
	vertical-align: middle;
	padding: 0 2px;
	width: 40px;
	text-align: center;
	margin: 0 10px 0 10px;
	/*cursor: pointer;*/
	font-family: Helvetica Bold,Arial,sans-serif;
}

.Gen_TDPaginationItemSuite,
.Gen_TdPaginationItemInexistant {
	vertical-align: middle;
	padding: 0 2px;
	width: 40px;
	text-align: center;
	margin: 0 10px 0 10px;
	cursor: default;
	font-family: Helvetica Bold,Arial,sans-serif;
	border: 0;
	height: 55px;
}

.Gen_TDPaginationItemSuite {
	width: 20px;
}

.Gen_TdPaginationItemChoisi {
	vertical-align: middle;
	padding: 0 2px;
	width: 40px;
	text-align: center;
	margin: 0 10px 0 10px;
	font-family: Helvetica Bold,Arial,sans-serif;
}

.Gen_PaginationItem {
	white-space: nowrap;
	display: block;
	color: #12c;
	cursor: pointer;
	font-size: 15px;
	height: 39px;
	line-height: 39px;
	vertical-align: middle;
	border: 1px solid #EEE;
}

.Gen_PaginationItemChoisi {
	white-space: nowrap;
	display: block;
	/*color: #222; */
	cursor: default;
	font-weight: bold;
	font-size: 15px;
	border: 1px solid #3079ED;
	background-color: #4D90FE;
	color: #fff;
	height: 39px;
	line-height: 39px;
	vertical-align: middle;
}

.Gen_TdPaginationItem:hover,
.Gen_PaginationItem:hover {
	text-decoration: underline;
	color: #12c;
}

.Gen_PaginationItemChoisi:hover {
	color: #222;
}

.Gen_PaginationFleche {
	display: block;
	color: #36c;
	line-height: 30px;
	cursor: pointer;
	font-weight: bold;
	font-size: 15px;
	width: 75px;
	min-width: 75px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	background-color: whiteSmoke;
	background-image: -webkit-gradient(linear,left top,left bottom,from(whiteSmoke),to(#F1F1F1));
	border-radius: 2px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: #36C;
	height: 30px;
	line-height: 30px;
	padding: 4px 8px;
	vertical-align: middle;
	text-align: center;
	border-color: #D9D9D9;
	border-width: 1px;
	font-family: Helvetica Bold,Arial,sans-serif;
}

	.Gen_PaginationItem:active,
	.Gen_PaginationFleche:active {
		color: #DB4E36;
	}

.Gen_PaginationFlecheInactif {
	display: none;
}

/* 
##Pagination générique
Style de base la pagination.

NOTE: Pour plus de détails sur comment utiliser la pagination générique dans un projet ASP.NET MVC, 
voir la page "Omnivox - Pagination Générique" du wiki OnTime.

<br />

    <div class="Gen_Pagination Gen_Center_Div">
        <a href="javascript:void(0)" class="Gen_PaginationPage">1</a>
        <span> ... </span>
        <span class="Gen_PaginationPage">20</span>
        <span class="Gen_PaginationPage Gen_PaginationPageCourante">21</span>
        <span class="Gen_PaginationPage">22</span>
        <span> ... </span>
        <a href="javascript:void(0)" class="Gen_PaginationPage">42</a>
    </div>

*/

.Gen_Pagination {
    width: 75%;
	text-align: center;
	height: 55px;
    line-height: 55px;
}

.Gen_PaginationPage {
    white-space: nowrap;
	display: block;
	color: #12c;
	cursor: pointer;
	font-size: 15px;

    text-decoration: none;
	height: 40px;
    width: 40px;

	line-height: 40px;
	border: 1px solid #EEE;
    display: inline-block;
    margin: 0 5px;
}

.Gen_PaginationPage:hover {
	text-decoration: underline;
	color: #12c;
}

.Gen_PaginationPageCourante {
	cursor: default;
	font-weight: bold;

	border: 1px solid #3079ED;
	background-color: #4D90FE;
	color: #fff;
}

.Gen_PaginationPageCourante:hover {
    color: black;
    text-decoration: none;
}

/*
##Styles for validation helpers

TODO
*/
.field-validation-error {
	color: #f00;
}

.field-validation-valid {
	display: none;
}

.input-validation-error {
	border: 1px solid #f00;
	background-color: #fee;
}

.validation-summary-errors {
	font-weight: bold;
	color: #f00;
}

.validation-summary-valid {
	display: none;
}



/*
##Styles pour le date picker
*/

.ui-datepicker-trigger {
	position: relative;
	top: 3px;
	margin-left: 5px;
	margin-right: 5px;
	cursor: pointer;
}

.ui-datepicker-prev, .ui-datepicker-next {
	cursor: pointer;
}

input.needDatepicker {
	width: 75px;
}

input.hasDatepicker {
	width: 75px;
}

/*
##Styles pour les textarea en mode readonly

TODO

<!--  Annie: 2013-07-23 - [B45257] - Ne pas mettre TEXTAREA tel quel ici svp. ça pète tous les textarea partout.  -->*/
div.Gen_divTextareaReadonly {
	-moz-appearance: textfield-multiline;
	-webkit-appearance: textarea;
	border: 1px solid gray;
	font: medium -moz-fixed;
	font: -webkit-small-control;
	height: 28px;
	overflow: auto;
	padding: 2px;
	resize: both;
	word-wrap: break-word;
	-ms-word-wrap: break-word;
}

	div.Gen_divTextareaReadonly:focus, div.Gen_divTextareaReadonly:hover {
		box-shadow: none !important;
		border: 1px solid gray !important;
		outline-style: none !important;
		outline-color: transparent !important;
	}

/*
## Styles heures

TODO
*/

input.heure {
	width: 75px;
}


/*
##Readonly

TODO

Utilisé dans Skytech.WebForm.disableContainer et Skytech.WebForm.disableControl 
*/
.textReadOnly {
	background-color: #efefef;
}

.textGrayDisable {
	color: gray;
}



/*
##Erreurs custom

TODO

Liste d'erreurs custom en haut des formulaires ValidationSummary
*/
div.validation-summary-errors {
	background-color: #FFE3E7;
	border-color: #FFC3C6;
	border-style: solid;
	border-width: 1px;
	color: #941C4A;
	margin-bottom: 20px;
	font-weight: bold;
}

	div.validation-summary-errors ul {
		margin-top: 10px;
		margin-bottom: 10px;
	}

div.validation-summary-green {
	background-color: #A1FF91;
	border-color: #268E30;
	border-style: solid;
	border-width: 1px;
	color: #115B06;
	margin-bottom: 20px;
	font-weight: bold;
}

	div.validation-summary-green ul {
		margin-top: 10px;
		margin-bottom: 10px;
	}

.validation-summary-valid {
	display: none;
}


/*
##RH-Paie

TODO

CSS commun pour les modules de RHPaie
*/
.LoupeSearchTextBox {
	cursor: pointer;
	padding-right: 15px;
	vertical-align: text-bottom;
}

.spanSearchTextBox input {
	margin-right: 5px;
}

.k-grid td.GridSearchTextbox {
	white-space: nowrap;
	width: 300px;
	max-width: 300px;
	vertical-align: top;
}

.k-grid td.tdGridAvecSearchTextbox {
	vertical-align: top;
}


.gridColonneAlignementDroite {
	text-align: right;
}

/*
##PopUp RH-Paie

TODO

Style unique pour le Popup de recherche d'employé RHPaie
*/


#divPopupSelectionEmployeRHPaieForm .field-description {
	color: #25517c;
	display: block;
	font-size: 10px;
	font-weight: normal;
}


#divPopupSelectionEmployeRHPaieForm #GridListeEmployesRHPaie {
	/*width:650px;*/
	margin-bottom: 30px;
}

	#divPopupSelectionEmployeRHPaieForm #GridListeEmployesRHPaie tbody tr td a:hover {
		color: #fff;
	}

	#divPopupSelectionEmployeRHPaieForm #GridListeEmployesRHPaie tbody tr td.tdLienAction:hover a {
		color: #fff;
	}

#divPopupSelectionEmployeRHPaieForm .divActions {
	position: absolute;
	width: 170px;
	display: none;
	cursor: pointer;
	border: 1px solid #D0D0D0;
	padding: 7px;
	background-color: #fff;
}


#divPopupSelectionRevenuForm #GridListeRevenus .truncTitre,
#divPopupSelectionRevenuForm #GridListeRevenus .truncAssistance {
	white-space: nowrap;
	max-width: 365px;
}


#divPopupSelectionPosteBudgetaireForm #GridListePostes .truncTitre {
	white-space: nowrap;
	max-width: 425px;
}


#divPopupSelectionProjetSpecifiqueForm #GridListeProjets .truncTitre {
	white-space: nowrap;
	max-width: 405px;
}

#divPopupSelectionProjetSpecifiqueForm #GridListeProjets .truncDescription {
	white-space: nowrap;
	max-width: 315px;
}


#divPopupSelectionServiceDisciplineForm #GridListeServicesDisciplines .truncTitre {
	white-space: nowrap;
	max-width: 725px;
}


#divPopupSelectionInstitutionBancaireForm #GridListeInstitutions .truncTitre {
	white-space: nowrap;
	max-width: 215px;
}

#divPopupSelectionInstitutionBancaireForm #GridListeInstitutions .truncAdresse {
	white-space: nowrap;
	max-width: 185px;
}


#divPopupSelectionCoursPedagogieRHPaieForm #GridListeCours .truncTitre {
	white-space: nowrap;
	max-width: 725px;
}


#divPopupSelectionGroupePedagogieRHPaieForm #GridListeGroupes .truncTitre {
	white-space: nowrap;
	max-width: 150px;
}


#divPopupSelectionPosteForm #GridListePostes .truncNumero {
	white-space: nowrap;
	max-width: 136px;
}

#divPopupSelectionPosteForm #GridListePostes .truncTitre {
	white-space: nowrap;
	max-width: 300px;
}

#divPopupSelectionPosteForm #GridListePostes .truncDescription {
	white-space: nowrap;
	max-width: 134px;
}

#divPopupSelectionPosteForm #GridListePostes .truncType {
	white-space: nowrap;
	max-width: 99px;
}


#divPopupSelectionGroupeMiaRHPaieForm #GridListeGroupes .truncTitre {
	white-space: nowrap;
	max-width: 124px;
}

#divPopupSelectionGroupeMiaRHPaieForm #GridListeGroupes .truncInstructeur {
	white-space: nowrap;
	max-width: 124px;
}

#divPopupSelectionGroupeMiaRHPaieForm #GridListeGroupes .truncNumero {
	white-space: nowrap;
	max-width: 114px;
}

#divPopupSelectionGroupeMiaRHPaieForm #GridListeGroupes .truncNumeroActivite {
	white-space: nowrap;
	max-width: 89px;
}


/*
##Popup de recherche RHPaie

TODO

*/
.divPopupSelection {
	padding-bottom: 20px;
}

	.divPopupSelection #Recherche {
		margin-left: 5px;
		width: 200px;
	}

	.divPopupSelection #divRecherche {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.divPopupSelection .k-grid tbody td {
		cursor: pointer;
	}

	.divPopupSelection .k-grid tbody tr:hover {
		background-color: #3297fd;
		color: #fff;
	}


	.divPopupSelection .k-grid tbody tr.trAucuneDonnees:hover {
		background-color: #fff;
		color: #000;
		cursor: auto;
	}

/*
##Alerts

<h4>Alert d'erreur</h4>

	<div class="Gen_Alert Gen_Alert_Error">
		<div class="Gen_Alert_Icon">
		</div>
		<div class="Gen_Alert_Content">
			<div class="Gen_Alert_Title">
				ATTENTION
			</div>
			<p>Ceci est un alert d'erreur</p>
		</div>
		<div class="Gen_Alert_Clear">
		</div>
	</div>
	
<h4>Alert de success</h4>

	<div class="Gen_Alert Gen_Alert_Success">
		<div class="Gen_Alert_Icon">
		</div>
		<div class="Gen_Alert_Content">
			<div class="Gen_Alert_Title">
				SUCCÈS
			</div>
			<p>Ceci est un alert de succès</p>
		</div>
		<div class="Gen_Alert_Clear">
		</div>
	</div>

<h4>Alert d'info</h4>

	<div class="Gen_Alert Gen_Alert_Info">
		<div class="Gen_Alert_Icon">
		</div>
		<div class="Gen_Alert_Content">
			<div class="Gen_Alert_Title">
				INFORMATIION
			</div>
			<p>Ceci est un alert d'info</p>
		</div>
		<div class="Gen_Alert_Clear">
		</div>
	</div>

<h4>Alert de warning</h4>

	<div class="Gen_Alert Gen_Alert_Warning">
		<div class="Gen_Alert_Icon">
		</div>
		<div class="Gen_Alert_Content">
			<div class="Gen_Alert_Title">
				ATTENTION
			</div>
			<p>Ceci est un alert d'avertissement</p>
		</div>
		<div class="Gen_Alert_Clear">
		</div>
	</div>
	
*/

	.Gen_Alert 
	{
		max-width: 700px;
		border-collapse: collapse;
		margin-bottom: 30px;
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
		/*Christophe G. 2016-04-01 - [B65954] On aligne à gauche car sinon l'icone à gauche se retrouve tout croche si le parent est text-align:center!*/
		text-align: left;
	}

	.Gen_Alert > .Gen_Alert_Content, .Gen_Alert > .Gen_Alert_Icon 
	{
		display:table-cell;
		vertical-align:top;
	}

	.Gen_Alert > .Gen_Alert_Icon 
	{
		width:85px;
		background-position:center;
		background-repeat:no-repeat;
	}
	.Gen_Alert > .Gen_Alert_Content 
	{
		padding:15px;
		font-size:14px;
	}
	.Gen_Alert > .Gen_Alert_Content > .Gen_Alert_Title 
	{
		font-size:18px;
		font-weight:bold;
		margin-bottom:7px;
	}

	/* Christophe G. 2016-04-22 - [B70234]  À certaines places, le padding des ul sont mis à zéro et si on met une liste dans le message d'erreur, les bullets 
											sont collés sur l'icône à gauche.
	*/
	.Gen_Alert > .Gen_Alert_Content ul {
		padding-left: 35px;
	}

	.Gen_Alert > .Gen_Alert_Clear 
	{
		clear:both;
		height:0;
	}

	.Gen_Alert.Gen_Alert_Error 
	{
		background-color: #F9E5E6;
		border: 1px solid #FAD2D3;
		color: #E80000;
	}

	.Gen_Alert.Gen_Alert_Error > .Gen_Alert_Icon 
	{
		background-color: #FAD2D3;
		background-image: url("/Images/General/Alert_Error.png");
	}

	.Gen_Alert.Gen_Alert_Success
	{
		background-color: #E3EBC6;
		border: 1px solid #CDDB9B;
	}

	.Gen_Alert.Gen_Alert_Success > .Gen_Alert_Icon 
	{
		background-color: #CDDB9B;
		background-image: url("/Images/General/Alert_Success.png");
	}

	.Gen_Alert.Gen_Alert_Info
	{
		background-color: #d8ecf5;
		border: 1px solid #aed7ea;
		color: #5593b1;
	}

	.Gen_Alert.Gen_Alert_Info > .Gen_Alert_Icon 
	{
		background-color: #aed7ea;
		background-image: url("/Images/General/Alert_Information.png");
	}

	.Gen_Alert.Gen_Alert_Warning
	{
		background-color: #fcf7d9;
		border: 1px solid #f7e292;
		color: #c08801;
	}

	.Gen_Alert.Gen_Alert_Warning > .Gen_Alert_Icon 
	{
		background-color: #f7e292;
		background-image: url("/Images/General/Alert_Warning.png");
	}

/*
##MessageBox

Des popup style alert/confirm pour éventuellement remplacer tous les alert et confirm dans omnivox.

Peuvent être utilisé de deux manière différente, soit comme dans les exemples ci-dessous **(manière préféré)** c'est-à-dire en rajoutant des attributs **data-** à un bouton et en passant un **CallBack** qui sera appelé selon la réponse.

<script>
	//Cas exceptionnel de tag script dans un exemple car on ceut binder les messages box seulement quand ils sont affichés dans la page
	Utils.MessageBox.BindMessageBox();
</script>

<h4>Exemple</h4>

	<a	class="Gen_MessageBox_Trigger Gen_Float_Left reset-btn Gen_Btn Gen_BtnAction" 
		data-messagebox-message="Contenu du alert"
		data-messagebox-title="Titre"
		data-messagebox-buttons-type="alert"
	>
		MessageBox
	</a>
	<a	class="Gen_MessageBox_Trigger Gen_Float_Left reset-btn Gen_Btn Gen_BtnSupprimer" 
		data-messagebox-message="Contenu du message box"
		data-messagebox-title="Titre"
		data-messagebox-callback-negative="Utils.MessageBox.SetMessageBoxToLoading(); alert('Continuer cliqué'); setTimeout(Utils.MessageBox.HideMessageBox, 1000);"
		data-messagebox-buttons-type="deleteconfirm"
	>
		MessageBox Suppression
	</a>
	<a	class="Gen_MessageBox_Trigger Gen_Float_Left reset-btn Gen_Btn Gen_BtnContinuer" 
		data-messagebox-message="Contenu du message box"
		data-messagebox-title="Titre"
		data-messagebox-callback-positive="Utils.MessageBox.SetMessageBoxToLoading(); alert('Continuer cliqué'); setTimeout(Utils.MessageBox.HideMessageBox, 1000);"
		data-messagebox-buttons-type="confirm"
	>
		MessageBox Confirmation
	</a>

Ou bien carrément le faire en javascript comme dans cet exemple:

	<a id="exempleMessageBoxAlert" class="Gen_Float_Left reset-btn Gen_Btn Gen_BtnAction">
		Alert JS
	</a>
	<a id="exempleMessageBoxConfirm" class="Gen_Float_Left reset-btn Gen_Btn Gen_BtnContinuer">
		Confirm JS
	</a>
	<a id="exempleMessageBoxDelete" class="Gen_Float_Left reset-btn Gen_Btn Gen_BtnSupprimer">
		Delete JS
	</a>

Javascript:

<pre tabindex="1" class="javascript">
	<code>
$("body").on("click", "#exempleMessageBoxAlert", function (event) {
	Utils.MessageBox.ShowAlert("Contenu du messagebox", "Titre", "Console.log('Callback de cancellation clické')");
});

$("body").on("click", "#exempleMessageBoxConfirm", function (event) {
	Utils.MessageBox.ShowConfirm("Contenu du messagebox", "Titre", "Console.log('Callback positif clické')", "Console.log('Callback de cancellation clické')");
});

$("body").on("click", "#exempleMessageBoxDelete", function (event) {
	Utils.MessageBox.ShowConfirmDelete("Contenu du messagebox", "Titre", "Console.log('Callback négatif clické')", "Console.log('Callback de cancellation clické')");
});
	</code>
</pre>

*/

	.Gen_MessageBox_Overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height:100%;
		z-index: 9001;
		background-image: url("/Images/General/MessageBox_Overlay.png");
		display: none;
		padding: 20px;
	}

	.Gen_MessageBox_Box {
		background-color: #FFF;
		box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.50);
		max-width: 600px;
		min-width: 300px;
		margin: auto;
		padding: 20px 20px 10px 20px;
		font-size: 13px;
		font-family: Arial;
	}

	.Gen_MessageBox_Box h1.Gen_MessageBox_Danger {
		color: #E80000;
	}

	.Gen_MessageBox_Buttons {
		margin-top: 30px;
		border-top: 1px solid #CCC;
		padding-top: 10px;
	}

	.Gen_MessageBox_Buttons > .Gen_Btn, .Gen_MessageBox_Buttons > .Gen_Btn:hover {
		float: right;
		margin: 0 0 0 13px;
	}

	.Gen_MessageBox_Loading {
		display: block;
		width: 32px;
		height: 32px;
		margin:0 auto;
		margin-top:25px;
	}

	/*<!-- ChristopheG: 2015-07-27 - [F29472] Style pour fix les textarea qui sont resizeable avec les nouveaux browsers -->*/

	textarea {
	resize: vertical;
	}

/*
##PasswordBox

Un formulaire demandant à l'utilisateur d'entrer son mot de passe/son NAS avant d'accéder certains modules.

Il sert pour signer aussi.

<h4>Exemples</h4>

<h5>Mot de passe</h5>

	<div class="Gen_PasswordBox">
		<div class="mdp_header">Confirmation d'accès</div>
		<div class="mdp_content">
			<table>
				<tr>
					<td class="mdp_colLeft">Nom</td>
					<td>John Doe Jr.</td>
				</tr>
				<tr>
					<td>Date</td>
					<td>2 septembre 2015 02:00 PM</td>
				</tr>
				<tr>
					<td>
						Mot de passe<br />
						Omnivox
					</td>
					<td>
						<input type="password" maxlength="255" size="20" name="txtPassword_frmConfirmPassword" value="" /><br />
						<span class="mdp_detail">Entrez votre mot de passe Omnivox afin de continuer vers la page désirée</span>
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<br>
						<input type="submit" name="txtPassword" value="Continuer" />
					</td>
				</tr>
			</table>
		</div>
	</div>

<h5>Signature</h5>

	<div class="Gen_PasswordBox">
		<div class="mdp_header">Signature électronique</div>
		<div class="mdp_content">
			<table>
				<tr>
					<td colspan="2">
						<div class="checkboxSignature">
							<input id="IndicateurContratSigner" name="IndicateurContratSigner" type="checkbox" value="true">
							<input name="IndicateurContratSigner" type="hidden" value="false">
						</div>
						<div class="labelSignature">
							<label for="IndicateurContratSigner">J'ai pris connaissance des conditions de ce contrat</label>
						</div>
					</td>
				</tr>
				<tr>
					<td class="mdp_colLeft">Nom</td>
					<td>John Doe Jr.</td>
				</tr>
				<tr>
					<td class="mdp_colLeft">Date</td>
					<td>2&nbsp;septembre&nbsp;2015&nbsp;à&nbsp;14:00</td>
				</tr>
				<tr>
					<td>
						<label for="PasswordSignature">Mot de passe<br>Omnivox</label>
					 </td>
					<td>
						<input id="PasswordSignature" name="PasswordSignature" type="password">
						<span class="mdp_detail">Entrez votre mot de passe Omnivox afin de continuer vers la page désirée</span>
					</td>
				</tr>
			</table>
			<div class="ipCachee">IP: 127.0.0.1</div>
		</div>
	</div>

<h5>NAS</h5>

	<div class="Gen_PasswordBox">
		<div class="mdp_header">Confirmation d'accès</div>
		<div class="mdp_content">
			<table>
				<tr>
					<td class="mdp_colLeft">Nom</td>
					<td>John Doe Jr.</td>
				</tr>
				<tr>
					<td>Date</td>
					<td>2 septembre 2015 14:00</td>
				</tr>
				<tr>
					<td>4 derniers chiffres de votre&nbsp;NAS</td>
					<td>
						<input type="password" maxlength="255" size="20" name="txtPassword_frmConfirmPassword" value="" /> <br />
						<span class="mdp_detail">Inscrivez les 4 derniers chiffres de votre numéro d'assurance sociale (NAS)</span>
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<br />
						<input type="submit" name="txtPassword" value="Continuer">
					</td>
				</tr>
			</table>
			
		</div>
	</div>

<h5>Mot de passe superuser</h5>

	<div class="Gen_PasswordBox">
		<div class="mdp_header">Confirmation d'accès</div>
		<div class="mdp_content">
			<table>
				<tr>
					<td class="mdp_colLeft">Nom</td>
					<td>John Doe Jr.</td>
				</tr>
				<tr>
					<td>Date</td>
					<td>2 septembre 2015 14:00</td>
				</tr>
				<tr>
					<td>Mot de passe Super Utilisateur</td>
					<td>
						<input type="password" maxlength="255" size="20" name="txtPassword_frmConfirmPassword" value="" /> <br />
						<span class="mdp_detail">Entrez votre mot de passe Super Utilisateur afin de continuer</span>
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<br />
						<input type="submit" name="txtPassword" value="Continuer">
					</td>
				</tr>
			</table>
			
		</div>
	</div>

*/


.Gen_PasswordBox
{
	width: 360px;
	margin: 0 auto;
	text-align: left;
	margin-top: 1em;
}

.Gen_PasswordBox .mdp_header,
.Gen_PasswordBox .mdp_content
{
	border: 1px solid #91A5BB;
	padding: 0.25em 10px;
}

.Gen_PasswordBox .mdp_header
{
	background-color: #00991A;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
}

.Gen_PasswordBox .mdp_content
{
	background-color: #F2F2F2;
	border-top: 0px solid black;
	position: relative;
}

.Gen_PasswordBox .mdp_content table
{
	width: 100%;
}

.Gen_PasswordBox .mdp_content td
{
	font-weight: bold;
	vertical-align: top;
	padding: 0.25em 0;
}

.Gen_PasswordBox .mdp_content td.tdCheckBox
{
	padding-bottom: 0.6em;
}

.Gen_PasswordBox .mdp_colLeft
{
	width: 114px;
}

.Gen_PasswordBox .mdp_detail
{
	font-weight: normal;
	font-size: 10px;
	display: block;
}

.Gen_PasswordBox .checkboxSignature
{
	width: 20px;
	display: inline-block;
	vertical-align: top;
}

.Gen_PasswordBox .checkboxConfirmation
{
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}

.Gen_PasswordBox .labelSignature
{
	display: inline-block;
	width: 92%;
}

.Gen_PasswordBox .labelConfirmation
{
	display: inline-block;
	width: 90%;
	vertical-align: middle;
	cursor: pointer;
}

.Gen_PasswordBox .labelSignature label,
.Gen_PasswordBox .labelConfirmation .label
{
	color: #143150;
	font-size: 17px;
	font-weight: bold;
}

.Gen_PasswordBox .mdp_content .ipCachee
{
	position: absolute;
	left: 0;
	bottom: 0;
	color: #f2f2f2;
	font-size: 9px;
}

/*
## BigCheckbox

C'est une plus grosse checkbox comme resizer les checkbox du browser est un
comportement non-standard.

*/

.Gen_BigCheckBox
{
	width: 24px;
	height: 24px;
	cursor: pointer;
	background-image: url(/images/General/CheckBox_Big_UnChecked.png);
}

.Gen_BigCheckBox.checked
{
	background-image: url(/images/General/CheckBox_Big_Checked.png);
}

.Gen_BigCheckBox.red.checked
{
	background-image: url(/images/General/CheckBox_Big_Checked_Rouge.png);
}


/*
## Nouveau layout 

*/

.Gen_Table_FormulairePaiement
{
	background-color:#eeeeee;
	padding-left:15px;
	padding-right:15px;
	margin-top:30px;
	border-radius: 12px;
}

.Gen_Td_Titre_FormulairePaiement
{
	padding-bottom:40px;
	padding-top:25px;
}

.Gen_Titre_FormulairePaiement
{
	font-size:26px;
	color:#333;
	font-weight:bold;
}

.Gen_Td_FormulairePaiement
{
	padding-bottom:18px;
}

.Gen_Last_Td_FormulairePaiement
{
	padding-bottom:10px;
}

.Gen_Titre_Td_Colonne_Gauche_FormulairePaiement
{
	font-size:19px;
	color:#555;
}

.Gen_Description_Td_Colonne_Gauche_FormulairePaiement
{
	color:#777;
	font-size:10px;
}

.Gen_Input_Td_Droite_Gauche_FormulairePaiement
{
	font-size:19px;
	color:#444;
	max-width: 100%;
}

.Gen_Input_TypeCarte_Td_Droite_Gauche_FormulairePaiement
{
	font-size:17px;
	color:#444;
}

.Gen_Td_Boutons_FormulairePaiement
{
	padding:0px;
}


.Gen_BtnPayer_FormulairePaiement
{
	width: 250px;
	font-size: 18px;
}

.Gen_Note_FormulairePaiement
{
	color:#777;
	font-size:10px;
	padding-bottom:25px;
	padding-top:10px;
}

#Gen_Td_ColonneSaisieCVD
{
	width:86px;
}

#Gen_Td_ColonneExplicationCVD
{
	padding-left:5px;
}

#Gen_Container_ExplicationCVD
{
	position:relative;
}

#Gen_Tooltip_ExplicationCVD
{
	width:240px;
	position:absolute;
	top:20px;
	left:-25px;
	display:none;
}

#Gen_DivImageTooltip_ExplicationCVD
{
	background-image: url(/images/General/icone_CVD_Tooltip.gif);
	background-repeat: no-repeat;
	background-position: 30px 0px;
	height:6px;
}

#Gen_DivBodyTooltip_ExplicationCVD
{
	background-image: url(/images/General/icone_CVD_Info.png);
	background-color:#424242;
	background-repeat: no-repeat;
	background-position: 10px 10px; 
	padding:10px;
	padding-left:130px;

}

.Gen_Texte_ExplicationCVD
{
	font-size:12px;
	color:#fff;
}

.Gen_LargeTextBox
{
	font-size: 1.7em;
	border: 1px solid #ccc;
	padding: 2px;
}