/* Common CSS solutions */

/*UTILITY CLASSES BEGINS*/

/* TEXT UTILITY CSS BEGINS | DEBUT DU CSS D'UTILITE DE TEXTE */

/*MANDATORY FIELD FONT STYLE */
.redCol {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF0000;
width: 2%;
}
.redText {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF0000;
}


/*FONT STYLE */

.italic {
font-style:italic;
}
.normal {
font-style: normal;
font-weight: normal;
}
.textAlignRight {
	text-align:right;
}
.textAlignLeft {
	text-align:left;
}
.textAlignCenter {
	text-align:center;
}
/*FONT WEIGHT*/

.bold{
font-weight: bold;
}

/*POSITION*/
.relative {
position:relative;
}

.absolute {
position:absolute;
}

/* UL & OL NO INDENT*/

ul.noIndent {
margin-left: 10px;
padding-left: 9px;
}

ol.noIndent {
margin-left: 10px;
padding-left: 18px;
}

/* UL   NO BULLET NO INDENT */
ul.noBulletnoIndent{
list-style-type: none;
margin: 0px;
padding: 0px;
}

/* UL & OL  SPACE*/
ol.space li { 
margin-bottom:20px; 
margin-top:20px; 
}

ul.space li { 
margin-bottom:20px; 
margin-top:20px; 
}



/*Nested space/noSpace*?

/*Unordered lists*/

ul.space li, ol.space li { /* Spacing level one list items */ 
margin-top: 20px;
margin-bottom: 20px;
}

ul.space ul.noSpace li { /* Compressing level two list items */ 
margin-top: 0px;
margin-bottom: 0px;
}

ul.space ul.noSpace ul.space li { /* Spacing level three list items */
margin-top: 20px;
margin-bottom: 20px;
}

ul.space ul.noSpace ul.space ul.noSpace li{ /* Compressing list items on level four and deeper */
margin-top: 0px;
margin-bottom: 0px;
}


/*Ordered lists*/

ol.space li { /* Spacing level one list items */ 
margin-top: 20px;
margin-bottom: 20px;
}

ol.space ol.noSpace li { /* Compressing level two list items */ 
margin-top: 0px;
margin-bottom: 0px;
}

ol.space ol.noSpace ol.space li { /* Spacing level three list items */
margin-top: 20px;
margin-bottom: 20px;
}

ol.space ol.noSpace ol.space ol.noSpace li{ /* Compressing list items on level four and deeper */
margin-top: 0px;
margin-bottom: 0px;
}



/* FOOTNOTE*/

p.footnote{
font-size: 85%;
color: #000000; 
font-style: normal;
}

/* WIDTH  */ 
.width10 {
width: 10%;
}
.width20 {
width: 20%;
}
.width30 {
width: 30%;
}
.width40 {
width: 40%;
}
.width50 {
width: 50%;
}
.width60 {
width: 60%;
}
.width70 {
width: 70%;
}
.width80 {
width: 80%;
}
.width90 {
width: 90%;
}
.width100 {
width: 100%;
}
/* MARGIN  */ 

.margin0 {
margin: 0px;
}
.margin1 {
margin: 1px;
}
.margin2 {
margin: 2px;
}
.margin3 {
margin: 3px;
}
.margin4 {
margin: 4px;
}
.margin5 {
margin: 5px;
}
.margin8 {
margin: 8px;
}
.margin10 {
margin: 10px;
}
.margin12 {
margin: 12px;
}
.margin15 {
margin: 15px;
}
.margin16 {
margin: 16px;
}
.margin20 {
margin: 20px;
}
.margin40 {
margin: 40px;
}


/*  MARGIN TOP  */
.marginTop0 {
margin-top:0px;
}
.marginTop1 {
margin-top: 1px;
}
.marginTop2 {
margin-top: 2px;
}
.marginTop3 {
margin-top: 3px;
}
.marginTop4 {
margin-top: 4px;
}
.marginTop5 {
margin-top: 5px;
}
.marginTop8 {
margin-top: 8px;
}
.marginTop10 {
margin-top: 10px;
}
.marginTop12 {
margin-top: 12px;
}
.marginTop16 {
margin-top: 16px;
}
.marginTop20 {
margin-top: 20px;
}


/*  MARGIN BOTTOM  */
.marginBottom0 {
margin-bottom: 0px;
}
.marginBottom1 {
margin-bottom: 1px;
}
.marginBottom2 {
margin-bottom: 2px;
}
.marginBottom3 {
margin-bottom: 3px;
}
.marginBottom4 {
margin-bottom: 4px;
}
.marginBottom5 {
margin-bottom: 5px;
}
.marginBottom8 {
margin-bottom: 8px;
}
.marginBottom10 {
margin-bottom: 10px;
}
.marginBottom12 {
margin-bottom: 12px;
}
.marginBottom16 {
margin-bottom: 16px;
}
.marginBottom20 {
margin-bottom: 20px;
}

/*  MARGIN LEFT  */
.marginLeft0 {
margin-left: 0px;
}
.marginLeft1 {
margin-left: 1px;
}
.marginLeft2 {
margin-left: 2px;
}
.marginLeft3 {
margin-left: 3px;
}
.marginLeft4 {
margin-left: 4px;
}
.marginLeft5 {
margin-left: 5px;
}
.marginLeft8 {
margin-left: 8px;
}
.marginLeft10 {
margin-left: 10px;
}
.marginLeft12 {
margin-left: 12px;
}
.marginLeft16 {
margin-left: 16px;
}
.marginLeft20 {
margin-left: 20px;
}

/*  MARGIN RIGHT  */
.marginRight0 {
margin-right: 0px;
}
.marginRight1 {
margin-right: 1px;
}
.marginRight2 {
margin-right: 2px;
}
.marginRight3 {
margin-right: 3px;
}
.marginRight4 {
margin-right: 4px;
}
.marginRight5 {
margin-right: 5px;
}
.marginRight8 {
margin-right: 8px;
}
.marginRight10 {
margin-right: 10px;
}
.marginRight12 {
margin-right: 12px;
}
.marginRight16 {
margin-right: 16px;
}
.marginRight20 {
margin-right: 20px;
}


/* PADDING */
.padding0{
padding:0px;
}
.padding1 {
padding: 1px;
}
.padding2 {
padding: 2px;
}
.padding3 {
padding: 3px;
}
.padding4 {
padding: 4px;
}
.padding5 {
padding: 5px;
}
.padding6 {
padding: 6px;
}
.padding7 {
padding: 7px;
}
.padding8 {
padding: 8px;
}
.padding9 {
padding: 9px;
}
.padding12 {
padding: 12px;
}
.padding16 {
padding: 16px;
}
.padding20 {
padding: 20px;
}
.padding20 {
padding: 20px;
}


/* PADDING TOP */
.paddingTop0 {
padding-top:0px;
}
.paddingTop1 {
padding-top: 1px;
}
.paddingTop2 {
padding-top: 2px;
}
.paddingTop3 {
padding-top: 3px;
}
.paddingTop4 {
padding-top: 4px;
}
.paddingTop5 {
padding-top: 5px;
}
.paddingTop6 {
padding-top: 6px;
}
.paddingTop7 {
padding-top: 7px;
}
.paddingTop8 {
padding-top: 8px;
}
.paddingTop12 {
padding-top: 12px;
}
.paddingTop16 {
padding-top: 16px;
}
.paddingTop20 {
padding-top: 20px;
}


/* PADDING BOTTOM */
.paddingBottom0 {
padding-bottom:0px;
}
.paddingBottom1 {
padding-bottom: 1px;
}
.paddingBottom2 {
padding-bottom: 2px;
}
.paddingBottom3 {
padding-bottom: 3px;
}
.paddingBottom4 {
padding-bottom: 4px;
}
.paddingBottom5 {
padding-bottom: 5px;
}
.paddingBottom6 {
padding-bottom: 6px;
}
.paddingBottom7 {
padding-bottom: 7px;
}
.paddingBottom8 {
padding-bottom: 8px;
}
.paddingBottom12 {
padding-bottom: 12px;
}
.paddingBottom16 {
padding-bottom: 16px;
}
.paddingBottom20 {
padding-bottom: 20px;
}

/* PADDING LEFT*/
.paddingLeft0 {
padding-left:0px;
}
.paddingLeft1 {
padding-left: 1px;
}
.paddingLeft2 {
padding-left: 2px;
}
.paddingLeft3 {
padding-left: 3px;
}
.paddingLeft4 {
padding-left: 4px;
}
.paddingLeft5 {
padding-left: 5px;
}
.paddingLeft6 {
padding-left: 6px;
}
.paddingLeft7 {
padding-left: 7px;
}
.paddingLeft8 {
padding-left: 8px;
}
.paddingLeft12 {
padding-left: 12px;
}
.paddingLeft16 {
padding-left: 16px;
}
.paddingLeft20 {
padding-left: 20px;
}

/* PADDING RIGHT*/
.paddingRight0 {
padding-right:0px;
}
.paddingRight1 {
padding-right: 1px;
}
.paddingRight2 {
padding-right: 2px;
}
.paddingRight3 {
padding-right: 3px;
}
.paddingRight4 {
padding-right: 4px;
}
.paddingRight5 {
padding-right: 5px;
}
.paddingRight6 {
padding-right: 6px;
}
.paddingRight7 {
padding-right: 7px;
}
.paddingRight8 {
padding-right: 8px;
}
.paddingRight12 {
padding-right: 12px;
}
.paddingRight16 {
padding-right: 16px;
}
.paddingRight20 {
padding-right: 20px;
}

/* COLOURED BORDERS */

/* BORDER LEFT RIGHT TOP  BOTTOM*/

.boxWhitethin{
border: #FFFFFF solid 1px;
}
.boxWhitethick{
border: #FFFFFF solid 3px;
}
.boxBlackthin{
border: #000000 solid 1px;
}
.boxBlackthick{
border: #000000 solid 3px;
}
.boxIthin{
border: #EEEEEE solid 1px;
}
.boxIthick{
border: #EEEEEE solid 3px;
}
.boxBthin{
border: #336699 solid 1px;
}
.boxBthick{
border: #336699 solid 3px;
}

/* TOP BORDER ONLY*/

.borderTopBlackthin{
border-top: #000000 solid 1px;
}
.borderTopBlackthick{
border-top: #000000 solid 3px;
}
.borderTopWhitethin{
border-top: #FFFFFF solid 1px;
}
.borderTopWhitethick{
border-top: #FFFFFF solid 3px;
}

.borderTopIthin{
border-top: #EEEEEE solid 1px;
}
.borderTopIthick{
border-top: #EEEEEE solid 3px;
}
.borderTopBthin{
border-top: #336699 solid 1px;
}
.borderTopBthick{
border-top: #336699 solid 3px;
}

/* BOTTOM BORDER ONLY */

.borderBottomBlackthin{
border-bottom: #000000 solid 1px;
}
.borderBottomBlackthick{
border-bottom: #000000 solid 3px;
}
.borderBottomWhitethin{
border-top: #FFFFFF solid 1px;
}
.borderBottomWhitethick{
border-top: #FFFFFF solid 3px;
}
.borderBottomIthin{
border-bottom: #EEEEEE solid 1px;
}
.borderBottomIthick{
border-bottom: #EEEEEE solid 3px;
}
.borderBottomBthin{
border-bottom: #336699 solid 1px;
}
.borderBottomBthick{
border-bottom: #336699 solid 3px;
}

/* LEFT BORDER ONLY */

.borderLeftBlackthin{
border-left: #000000 solid 1px;
}
.borderLeftBlackthick{
border-left: #000000 solid 3px;
}
.borderLeftWhitethin{
border-top: #FFFFFF solid 1px;
}
.borderLeftWhitethick{
border-top: #FFFFFF solid 3px;
}
.borderLeftIthin{
border-left: #EEEEEE solid 1px;
}
.borderLeftIthick{
border-left: #EEEEEE solid 3px;
}
.borderLeftBthin{
border-left: #336699 solid 1px;
}
.borderLeftBthick{
border-left: #336699 solid 3px;
}

/* RIGHT BORDER ONLY*/

.borderRightBlackthin{
border-right: #000000 solid 1px;
}
.borderRightBlackthick{
border-right: #000000 solid 3px;
}
.borderRightWhitethin{
border-top: #FFFFFF solid 1px;
}
.borderRightWhitethick{
border-top: #FFFFFF solid 3px;
}
.borderRightIthin{
border-right: #EEEEEE solid 1px;
}
.borderRightIthick{
border-right: #EEEEEE solid 3px;
}
.borderRightBthin{
border-right: #336699 solid 1px;
}
.borderRightBthick{
border-right: #336699 solid 3px;
}


/* Creating a box with a border and a background colour without using a table - Créer une boîte avec une bordure et une couleur de fond sans utiliser un tableau */
.box {
 border: 1px solid #000000; 
}

/* Simulating a single-column, multi-row table with a background colour and a border - Simuler un tableau à une colonne et à plusieurs lignes avec une couleur de fond et une bordure */

div.boxmultirow {
 border: 1px solid #000000;
         margin:1px;
}

/* Simulating a two-column single row table - Simuler un tableau à deux colonnes et à une ligne */
div.row {
 margin: 0; 
 padding: 0; 
 width: 98.5%; 
 overflow: hidden;}
div.cols2 {
 float: left; 
 width: 49%; 
 margin: 0 3px 0 0; 
 padding: 0;
}

/* Simulating a two-column multi row table - Simuler un tableau à deux colonnes et à plusieurs lignes */
div.row {
 margin: 0; 
 padding: 0; 
 width: 98.5%; 
 overflow: hidden;
}
div.cols2 {
 float: left; 
 width: 49%; 
 margin: 0 3px 0 0; 
 padding: 0;
}

/* Simulating a three-column single row table - Simuler un tableau à trois colonnes et à une ligne*/
div.row {
 margin: 0; 
 padding: 0; 
 width: 98.5%; 
 overflow: hidden;
}
div.cols3 {
 float: left; 
 width: 32%; 
 margin: 0 3px 0 0; 
 padding: 0;
}

/* Simulating a three-column multi-row table - Simuler un tableau à trois colonnes et à plusieurs lignes */
div.row {
 margin: 0; 
 padding: 0; 
 width: 98.5%; 
 overflow: hidden;
}
div.cols3 {
 float: left; 
 width: 32%; 
 margin: 0 3px 0 0; 
 padding: 0;
}

/*Background colors*/
.bg999999{background-color: #999999;} 
.bgcccccc {background-color: #cccccc;} 
.bgcc6666 {background-color: #cc6666;} 
.bgccccff {background-color: #ccccff;} 
.bgccffcc {background-color: #ccffcc;} 
.bgccffff {background-color: #ccffff;} 
.bgffffff {background-color: #ffffff;} 
.bgffff99 {background-color: #ffff99;} 
.bgffffcc{background-color: #ffffcc;} 
.bgffcccc {background-color: #ffcccc;} 
.bgffccff {background-color: #ffccff;} 
.bgffcc66 {background-color: #ffcc66;} 



/*NO BORDER*/

.noBorder {
 border-style: none;
}

/*FLOATS*/
.floatLeft {
	float:left;
}

.floatRight {
	float:right;
}


/*CLEAR FLOATS*/
.clearBoth {
	clear:both;
}
.clearLeft {
clear: left;
}
.clearRight {
clear: right;
}


/* COLUMN LAYOUT FOR CONTENT AREA*/
div.Row {float: left; margin: 0; padding: 0; width: 98.5%;}

/* 2 column layout */
div.d2col1 {float: left; width: 49%; margin: 0 3px 0 0; padding: 0;}
div.d2col2 {float: left; width: 49%; margin: 0; padding: 0;}

/* 3 column layout */
div.d3col1 {float: left; width: 32%; margin: 0 3px 0 0; padding: 0;}
div.d3col2 {float: left; width: 32%; margin: 0 3px 0 0; padding: 0;}
div.d3col3 {float: left; width: 32%; margin: 0; padding: 0;}

/* 4 column layout */
div.d4col1 {float: left; width: 24%; margin: 0 3px 0 0; padding: 0;}
div.d4col2 {float: left; width: 24%; margin: 0 3px 0 0; padding: 0;}
div.d4col3 {float: left; width: 24%; margin: 0 3px 0 0; padding: 0;}
div.d4col4 {float: left; width: 24%; margin: 0; padding: 0;}

/* 5 column layout */
div.d5col1 {float: left; width: 19%; margin: 0 3px 0 0; padding: 0;}
div.d5col2 {float: left; width: 19%; margin: 0 3px 0 0; padding: 0;}
div.d5col3 {float: left; width: 19%; margin: 0 3px 0 0; padding: 0;}
div.d5col4 {float: left; width: 19%; margin: 0 3px 0 0; padding: 0;}
div.d5col5 {float: left; width: 19%; margin: 0; padding: 0;}

/* fixItalics fixed the problem with IE6 and earlier broswers where a 'long' italicized (em) text causes IE to add 2 pixels to the width */
.fixItalics {
	height:1%;
	w\idth:100%;
	width:98%;
	overflow:visible;
}

/*UTILITY CLASSES ENDS*/