@charset "utf-8";
/* CSS Document */
<!--
/* reset all */
*, fieldset, input, p, blockquote, th, td {margin: 0; padding: 0; line-height:110%; z-index:1;} 
    body  {
    	font: 100% Arial, Helvetica, sans-serif;
    	background: #FFFFFF;
    	margin: 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
    	padding: 0;
    	text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
    	color: #000000;
    }
	ol, ul {list-style: none; margin:0; padding:0;}
	fieldset, img {border: 0;}
	legend {display:none;}
	button, input, textarea, select {font: 11px Arial, Helvetica, sans-serif;}
	.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {}
/* \*/* html .clearfix {height: 1%;}
.clearfix {display: block;}
.f_right {float:right;}
.f_left {float:left;}
.t_left {text-align:left;}
.t_right {text-align:right;}
    .exa #container { 
    	width: 1100px;  /* paramétrage de la largeur à 20 pixels de moins que le plein écran (800 pixels) pour tenir compte de l'habillage du navigateur et éviter l'apparition d'un ascenseur horizontal */
    	background: #FFFFFF url(../img/fond-exa.png);
    	margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
    	border: 0px solid #000000;
    	text-align: left; /* ce paramétrage annule le paramètre text-align:center de l'élément body. */
    } 
    .exa #header { 
    	background: #FFFFFF url(../img/bandeau-exacompta.png) no-repeat; 
    	padding: 0 0px 0 20px;  /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent en dessous. Si, au lieu de texte, c'est une image qui est insérée dans l'élément #header, il est conseillé de supprimer le remplissage. */
		margin:0 37px;
		height: 168px;
    } 
    .exa #header h1 {
    	margin: 0; /* la mise à zéro de la marge du dernier élément du div #header permet d'éviter une disparition de la marge (espace inexplicable entre les éléments div). Si l'élément div est entouré d'une bordure, cette précaution n'est pas nécessaire, car la bordure évite également la disparition de la marge */
    	padding: 20px 0; /* l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
    }
	.exa #header1 { float:left; width:135px;}
	.exa #header2 { float:left; width:666px; margin:0;}
	.exa ul#bandeau{ margin:17px 0 0 15px;}
	.exa ul#bandeau li {float:left; margin:0 0 12px 0; display:inline; border:none;}
	.exa ul#bandeau li a{}
	.exa #header3 { float:left; width:205px; margin:0;}
	.exa ul#drap{ margin:13px 0 0 0; padding:0 0 0 12px;}
	.exa ul#drap li {float:left; margin:0 0 22px 0; display:inline; border:none;}
	.exa ul#drap li a{margin:0;}
	.exa #header3 form {display:block; padding:15px 0px 0 16px; margin:0;}
	.exa #header3 form input {color:#928076; margin:2px 0 7px 0; border:0; padding:3px;} 
	
	

    .exa #sidebar1 {
    	float: left; /* cet élément est flottant, il faut donc lui attribuer une largeur */
    	width: 768px; /* Dans les navigateurs conformes au standard et dans Internet Explorer en mode standard, la largeur réelle de cet élément div est composée de la largeur plus le remplissage et la bordure */
    	background: #FFFFFF url(../img/ombre_teaser.png) no-repeat; /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
    	padding: 26px 0px 50px 0px; /* le remplissage permet d'écarter le contenu de l'élément div des bords de celui-ci */
		margin: 0 0 30px 0;
    }
    .exa #sidebar2 {
    	float: right; /* cet élément est flottant, il faut donc lui attribuer une largeur */
    	width: 228px; /* Dans les navigateurs conformes au standard et dans Internet Explorer en mode standard, la largeur réelle de cet élément div est composée de la largeur plus le remplissage et la bordure */
    	background: #FFFFFF url(../img/bout-teaser.png) no-repeat; /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
    	padding: 26px 10px 50px 20px; /* le remplissage permet d'écarter le contenu de l'élément div des bords de celui-ci */
		margin: 0 0 30px 0;
    }
	.exa #sidebar3 {
    	float: left; /* cet élément est flottant, il faut donc lui attribuer une largeur */
    	width: 168px; /* Dans les navigateurs conformes au standard et dans Internet Explorer en mode standard, la largeur réelle de cet élément div est composée de la largeur plus le remplissage et la bordure */
    	background: #FFFFFF; /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
    	padding: 0px 0px 30px 0px; /* le remplissage permet d'écarter le contenu de l'élément div des bords de celui-ci */
		margin: 0 0 50px 0;
    }
	#navi0110{display:block; margin:0 0 0 30px; padding:0; width:138px; background: #d10019 url(../img/fond_mid_classer.png) no-repeat;}
	#navi0120{display:block; margin:0 0 0 30px; padding:0; width:138px; background: #EC7405 url(../img/fond_mid_organiser.png) no-repeat;}
	#navi0130{display:block; margin:0 0 0 30px; padding:0; width:138px; background: #005090 url(../img/fond_mid_presenter.png) no-repeat;}
	#navi0140{display:block; margin:0 0 0 30px; padding:0; width:138px; background: #00a5cf url(../img/fond_mid_noter.png) no-repeat;}
	#navi0150{display:block; margin:0 0 0 30px; padding:0; width:138px; background: #898989 url(../img/fond_mid_signaler.png) no-repeat;}
	#navi0160{display:block; margin:0 0 0 30px; padding:0; width:138px; background: #C2005B url(../img/fond_mid_creer.png) no-repeat;}
	#navi0170{display:block; margin:0 0 0 30px; padding:0; width:138px; background: #54378a url(../img/fond_mid_souvenir.png) no-repeat;}
	#navi0180{display:block; margin:0 0 0 30px; padding:0; width:138px; background: #905e35 url(../img/fond_mid_agendas.png) no-repeat;}
	#navi0200{display:block; margin:0 0 0 30px; padding:0; width:138px; background: #89be96 url(../img/fond_mid_vert.png) no-repeat;}
	#navi0210{display:block; margin:0 0 0 30px; padding:0; width:138px; background: #5a4f4a url(../img/fond_mid_gamme.png) no-repeat;}
	.sub_t_0110 {background: url(../img/fond_haut_classer.png) no-repeat; height:102px; display:block;}
	.sub_b_0110 {background:  url(../img/fond_bas_classer.png) no-repeat; height:14px; display:block;}
	.sub_t_0120 {background: url(../img/fond_haut_organiser.png) no-repeat; height:102px; display:block;}
	.sub_b_0120 {background:  url(../img/fond_bas_organiser.png) no-repeat; height:14px; display:block;}
	.sub_t_0130 {background: url(../img/fond_haut_presenter.png) no-repeat; height:102px; display:block;}
	.sub_b_0130 {background:  url(../img/fond_bas_presenter.png) no-repeat; height:14px; display:block;}
	.sub_t_0140 {background: url(../img/fond_haut_noter.png) no-repeat; height:102px; display:block;}
	.sub_b_0140 {background:  url(../img/fond_bas_noter.png) no-repeat; height:14px; display:block;}
	.sub_t_0150 {background: url(../img/fond_haut_signaler.png) no-repeat; height:102px; display:block;}
	.sub_b_0150 {background:  url(../img/fond_bas_signaler.png) no-repeat; height:14px; display:block;}
	.sub_t_0160 {background: url(../img/fond_haut_creer.png) no-repeat; height:102px; display:block;}
	.sub_b_0160 {background:  url(../img/fond_bas_creer.png) no-repeat; height:14px; display:block;}
	.sub_t_0170 {background: url(../img/fond_haut_souvenir.png) no-repeat; height:102px; display:block;}
	.sub_b_0170 {background:  url(../img/fond_bas_souvenir.png) no-repeat; height:14px; display:block;}
	.sub_t_0180 {background: url(../img/fond_haut_agendas.png) no-repeat; height:102px; display:block;}
	.sub_b_0180 {background:  url(../img/fond_bas_agendas.png) no-repeat; height:14px; display:block;}
	.sub_t_0200 {background: url(../img/fond_haut_vert.png) no-repeat; height:102px; display:block;}
	.sub_b_0200 {background:  url(../img/fond_bas_vert.png) no-repeat; height:14px; display:block;}
	.sub_t_0210 {background: url(../img/fond_haut_gamme.png) no-repeat; height:102px; display:block;}
	.sub_b_0210 {background:  url(../img/fond_bas_gamme.png) no-repeat; height:14px; display:block;}
    #menu {display:block; margin:0; padding:0 0px 0 0px;}
	#menu li{padding:0 4px 5px 5px; display:block;}
	#menu li a{color:#FFFFFF; text-decoration:none; font-size:12px; font-weight:bold;}
	#menu li a#current{color:#c9c0db; text-decoration:none; font-size:12px; font-weight:bold;}
	#menu li a:hover{color:#c9c0db; text-decoration:none;}
	#menu li ul {}
	#menu li ul li{padding:0 0 0 5px; line-height:1;}
	#menu li ul li a{color:#FFFFFF; text-decoration:none; font-size:10px; font-weight:700;}
	#menu li ul li a:hover{color:#c9c0db; text-decoration:none; font-size:10px;}
	#menu li ul li a#current{color:#c9c0db; text-decoration:none; font-size:10px; font-weight:700;}
	
	.exa #sidebar4 {
    	float: right;  /* cet élément est flottant, il faut donc lui attribuer une largeur */
    	width: 858px;  /* Dans les navigateurs conformes au standard et dans Internet Explorer en mode standard, la largeur réelle de cet élément div est composée de la largeur plus le remplissage et la bordure */
    	background: #FFFFFF url(../img/fond_sidebar4.png) no-repeat; /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
    	padding: 0px 0px 30px 0px; /* le remplissage permet d'écarter le contenu de l'élément div des bords de celui-ci */
		margin: 0 0px 50px 0px;
    }
	#cata{display:block; margin:30px 0 15px 15px; padding:0;}
	
	.exa #sidebar4 h1{ display:inline; font-size:32px; font-weight:bold; margin:0 0 5px 0; padding:0; }
	.exa #sidebar4 h1.c0110 a{ color:#d10019; text-decoration:none;}
	.exa #sidebar4 h1.c0120 a{ color:#EC7405; text-decoration:none;}
	.exa #sidebar4 h1.c0130 a{ color:#005090; text-decoration:none; }
	.exa #sidebar4 h1.c0140 a{ color:#00a5cf; text-decoration:none; }
	.exa #sidebar4 h1.c0150 a{ color:#898989; text-decoration:none; }
	.exa #sidebar4 h1.c0160 a{ color:#C2005B; text-decoration:none; }
	.exa #sidebar4 h1.c0170 a{ color:#54378a; text-decoration:none; }
	.exa #sidebar4 h1.c0180 a{ color:#905E35; text-decoration:none; }
	.exa #sidebar4 h1.c0200 a{ color:#89be96; text-decoration:none; }
	.exa #sidebar4 h1.c0210 a{ color:#5a4f4a; text-decoration:none; }	
	.exa #sidebar4 h1 a:hover{text-decoration:none;}
	.exa #sidebar4 h2{display:inline; font-size:32px; font-weight:bold; margin:0 0 5px 10px; padding:0;}
	.exa #sidebar4 h2.c0110 a{ color:#e8aab2; text-decoration:none;}
	.exa #sidebar4 h2.c0120 a{ color:#EC7405; text-decoration:none; }
	.exa #sidebar4 h2.c0130 a{ color:#005090; text-decoration:none; }
	.exa #sidebar4 h2.c0140 a{ color:#00a5cf; text-decoration:none; }
	.exa #sidebar4 h2.c0150 a{ color:#898989; text-decoration:none; }
	.exa #sidebar4 h2.c0160 a{ color:#C2005B; text-decoration:none; }
	.exa #sidebar4 h2.c0170 a{ color:#54378a; text-decoration:none; }
	.exa #sidebar4 h2.c0180 a{ color:#ccbaac; text-decoration:none; }
	.exa #sidebar4 h2.c0200 a{ color:#89be96; text-decoration:none; }
	.exa #sidebar4 h2.c0210 a{ color:#5a4f4a; text-decoration:none; }	
	.exa #sidebar4 h2 a:hover{text-decoration:none;}
	.exa #sidebar4 h3{display:block; font-size:14px; font-weight:bold; margin:7px 0 15px 0; padding:0; color:#000000;}
	.exa #sidebar4 h3 a{color:#000000; text-decoration:none;}
	.exa #sidebar4 h3 a:hover{text-decoration:none;}
	.exa ul#teaser{ margin:0 0 0 0;}
	.exa ul#teaser li {float:left; margin:0 0 0px 0; display:block; width:225px; height:105px; line-height:110%;}
	.exa ul#teaser li a{margin:0; text-decoration:none; font-weight: bold; color:#FFFFFF;}
	.exa #sidebar5 {
    	float: left;  /* cet élément est flottant, il faut donc lui attribuer une largeur */
    	width: 971px;  /* Dans les navigateurs conformes au standard et dans Internet Explorer en mode standard, la largeur réelle de cet élément div est composée de la largeur plus le remplissage et la bordure */
    	background: #FFFFFF url(../img/fond_sidebar5.png) no-repeat; /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
    	padding: 0px 0px 30px 55px; /* le remplissage permet d'écarter le contenu de l'élément div des bords de celui-ci */
		margin: 0px 0px 50px 0px;
    }
	.exa #sidebar5 h1{ display:inline; font-size:32px; font-weight:bold; margin:0 0 5px 0; padding:0; color:#a8988e;}
	.exa #sidebar5 h1.vente{color:#0099b1;}
	.exa #sidebar5 h2{ display:inline; font-size:32px; font-weight:bold; margin:0 0 5px 10px; padding:0; color:#5a4f4a;}
	.exa #sidebar5 h1 a{ color:#a8988e; text-decoration:none;}
	.exa #sidebar5 h2 a{ color:#5a4f4a; text-decoration:none;}
	.exa #sidebar5 h1 a:hover{ text-decoration:none;}
	.exa #sidebar5 h2 a:hover{ text-decoration:none;}
	.exa #sidebar5 h3{display:block; font-size:14px; font-weight:bold; margin:7px 0 15px 0; padding:0; color:#000000;}
	.exa #sidebar5 h3 a{color:#000000; text-decoration:none;}
	.exa #sidebar5 h3 a:hover{text-decoration:none;}
	.exa #sidebar5 a{color:#000000; text-decoration:none;}
	.exa #sidebar5 a:hover{text-decoration:underline;}
    .exa #mainContentside { 
    	margin: 0 0; /* les marges droite et gauche de cet élément div créent les deux colonnes extérieures su les deux côtés de la page. Quelle que soit la taille du contenu dans les éléments div des encadrés, l'espace des colonnes reste préservé. Vous pouvez supprimer cette marge gauche si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace des encadrés lorsque le contenu de ces derniers se termine. */
    	padding: 0 10px; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
    } 
	.exa #mainContent { 
    	margin: 0 37px 0 37px; /* les marges droite et gauche de cet élément div créent les deux colonnes extérieures su les deux côtés de la page. Quelle que soit la taille du contenu dans les éléments div des encadrés, l'espace des colonnes reste préservé. Vous pouvez supprimer cette marge gauche si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace des encadrés lorsque le contenu de ces derniers se termine. */
    	padding: 0; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
    } 
	
	#nav {float: left; background:url(../img/ombre_nav.png) repeat-x; width: 1026px; line-height: 1; font-weight: bold; padding: 0; margin: 0 0 0 0;}

	#nav ul {float: left; width: 1026px; padding: 0; margin: 0 0 0 0;}
	#nav li {float: left; padding: 0; margin: 0;}
	#nav li#classer {padding: 0 0 0 0; width: 96px; margin: 0; background:url("../img/bout_classer.png")}
	#nav li#organiser {padding: 0 0 0 0; width: 110px; margin: 0; background:url("../img/bout_organiser.png")}
	#nav li#presenter {padding: 0 0 0 0; width: 155px; margin: 0; background:url("../img/bout_presenter.png")}
	#nav li#noter {padding: 0 0 0 0; width: 118px; margin: 0; background:url("../img/bout_noter.png")}
	#nav li#signaler {padding: 0 0 0 0; width: 156px; margin: 0; background:url("../img/bout_signaler.png")}
	#nav li#creer {padding: 0 0 0 0; width: 69px; margin: 0; background:url("../img/bout_creer.png")}
	#nav li#souvenir {padding: 0 0 0 0; width: 162px; margin: 0; background:url("../img/bout_souvenir.png")}
	#nav li#agendas {padding: 0 0 0 0; width: 106px; margin: 0 0 0 54px; background:url("../img/bout_agenda.png")}
	

	#nav p{height:125px; padding: 0; margin: 0 0 5px 0; text-align:center;}
	#nav a {display: block; font-size:13px; font-weight:700; height:54px; margin:0; padding:0 0 0 0; text-decoration:none;}	
	#nav a span  {float:left; display:block; padding:14px 10px 0px 1px; text-align:left; color:#FFF; text-decoration:none;}
	#nav li#classer a span  {padding-left:8px;}
	#nav li#agendas a span  {padding-left:22px;}	  
	  
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
	#nav a, #nav a span{float:none;}
    /* End IE5-Mac hack */
      
	#nav a:hover{color:#FFF; text-decoration:none;}
	#nav a:hover span {color:#FFF; text-decoration:none;}

	#nav li ul {position: absolute; left: -999em; height: 67px; h\eight: 57px; width: auto; w\idth: auto; font-size:13px; font-weight: 700; border-width: 0px 0px 0px 0px; z-index:1000;}
	#nav li#classer ul {height: 109px; width: 100px; w\idth: 75px;  margin: -54px 0 0 0; padding:25px 17px 0 5px;  background: url(../img/bout_classer_h.png) no-repeat;}
	#nav li#organiser ul {width: 137px; w\idth: 117px; margin: -54px 0 0 -27px; padding:10px 5px 0 15px; background: url(../img/bout_organiser_h.png) no-repeat;}
	#nav li#presenter ul {width: 183px; w\idth: 152px; margin: -54px 0 0 -28px; padding:10px 9px 0 22px; background: url(../img/bout_presenter_h.png) no-repeat;}
	#nav li#noter ul {width: 145px; w\idth: 117px; margin: -54px 0 0 -27px; padding:10px 8px 0 20px; background: url(../img/bout_noter_h.png) no-repeat;}
	#nav li#signaler ul {width: 183px; w\idth: 152px; margin: -54px 0 0 -27px; padding:10px 9px 0 22px; background: url(../img/bout_signaler_h.png) no-repeat;}
	#nav li#creer ul {width: 94px; w\idth: 67px; margin: -54px 0 0 -25px; padding:10px 8px 0 19px; background: url(../img/bout_creer_h.png) no-repeat;}
	#nav li#souvenir ul {width: 187px; w\idth: 160px; margin: -54px 0 0 -25px; padding:10px 8px 0 19px; background: url(../img/bout_souvenir_h.png) no-repeat;}
	#nav li#agendas ul {height:227px; width: 106px; w\idth: 87px; margin: -54px 0 0 0; padding:25px 4px 0 15px; background: url(../img/bout_agenda_h.png) no-repeat; line-height: 1;}
	#nav li li {padding: 0 0 0 0px; height:auto; margin:0; width: auto;}
	#nav li ul a {display: block; width: auto; height:auto; text-decoration:none; margin:0; padding:0; color:#FFFFFF;}
	#nav li#classer ul li a {width: 71px; w\idth: 71px; height:auto; text-decoration:none; margin:0; padding:0px 0px 8px 0;}	
	#nav li#classer ul li a span{ border-top:#FFFFFF solid; border-width:1px 0 0 0; padding:2px 0 0 2px; font: bold 10px Arial;line-height:1;}
	#nav li#organiser ul li a { padding:15px 10px 15px 15px;}
	#nav li#presenter ul li a { padding:15px 12px 15px 8px;}
	#nav li#noter ul li a { padding:15px 12px 15px 8px;}
	#nav li#signaler ul li a { padding:15px 12px 15px 8px;}
	#nav li#creer ul li a { padding:15px 12px 15px 8px;}
	#nav li#souvenir ul li a { padding:15px 5px 15px 8px;}	
	#nav li#agendas ul li a { width: 87px; w\idth: 87px; height:auto; text-decoration:none; margin:0; padding:0px 0px 8px 0;}
	#nav li#agendas ul li a span{ border-top:#FFFFFF solid; border-width:1px 0 0 0; padding:2px 0 0 7px; font: bold 10px Arial; line-height:1;}
	#nav li ul a:hover, #nav li#classer ul a:hover, #nav li#organiser ul a:hover, #nav li#presenter ul a:hover, #nav li#noter ul a:hover, #nav li#signaler ul a:hover, #nav li#creer ul a:hover, #nav li#agendas ul a:hover {color:#FFFFFF; text-decoration:none;}
	#nav li ul ul, #nav li#classer ul ul {margin: -1.75em 0 0 14em;}
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
	#nav li#agendas:hover ul ul, #nav li#classer:hover ul ul ul, #nav li#classer.sfhover ul ul, #nav li#classer.sfhover ul ul ul {left: -999em;}
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}

	#nav li ul li:hover, #nav li ul li.sfhover {}
	#nav li:hover, #nav li.sfhover {}
    
	#environnement { width: 1026px; line-height: 1; font-weight: normal; padding: 0; margin: 0 0px 10px 0px;}
	#environnement h1 {padding:525px 106px 30px 106px; color:#0b7925; margin:0;}
	#environnement h2 {padding:25px 0 5px 0; color:#000000; margin:0;}
	#environnement p {margin:0 106px 20px 106px; font-size:14px; display:block;}
	#environnement p img {margin:5px 0;}
	#environnement p a {margin:0; color:#0f73b7; text-decoration:none;}
	#environnement p a:hover {color:#0f73b7; text-decoration:underline;}	
	#environnement img {margin:0 55px 0 55px;}
	.exa #footer { 
    	padding: 15px 20px 0 20px; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
		margin: 0 37px;
    	background:#e3ddda;
		text-align:center;
		height:35px;
    } 
	.exa #footer ul { color:#5e514b; font-size:12px; font-weight:450; margin:0;}
	.exa #footer li { display:inline; margin:0; padding:0 20px 0 0;}
	.exa #footer a { text-decoration:none; color:#5e514b;}
	.exa #footer a:hover { text-decoration:none;}
	
    .exa #footer p {margin: 0; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
    	padding: 10px 0; /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */
    }
    .fltrt { /* cette classe permet de rendre flottant le côté droit d'un élément dans la page. L'élément flottant doit précéder l'élément à côté duquel il doit se trouver dans la page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* cette classe permet de rendre flottant le côté gauche d'un élément dans la page */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
	

#articles { line-height: 1; font-weight: bold; padding: 0; margin: 0 18px 20px 30px;}
#articles ul {float: left; width: 100%; list-style: none;}
#articles li {float: left; padding: 0;	width: 234px; padding:0; margin: 0 23px 20px 0; bottom:0; background:url(../img/fond_produit.png) no-repeat;}
#articles p{height:192px; width:188px; padding: 16px 26px 16px 20px; margin: 0 0 0 0; text-align:center;}
#articles a img{ display:block; border: 0; margin:0 auto; cursor:pointer;}
#articles a { display: block; color:#000000; margin:0; padding:0 0 0 0; text-decoration:none;}
#articles span {float:left; display:block; width:225px; padding:0 3px 0 2px; text-align:center;}
#articles a span.sstitre  {  height:55px; color:#000000; font: normal 11px Arial;}
#articles a span  { font: bold 11px Arial; height:25px; color:#000000; cursor:pointer;}
#articles a:hover span{color:#000000; text-decoration:none; cursor:pointer;}

#collection { line-height: 1; font-weight: bold; padding: 0; margin: 0 0px 20px 5px;}
#collection ul {float: left; width: 100%; list-style: none;}
#collection li {float: left; padding: 0; width: 234px; margin: 0 0 20px 0px; bottom:0; background:url(../img/fond_produit.png) no-repeat;}
#collection p{height:192px; width:188px; padding: 16px 26px 16px 20px; margin:0; text-align:center;}
#collection a img{ display:block; border: 0; margin:0 auto; cursor:pointer;}
#collection a { display: block; color:#000000; margin:0; padding:0 0 0 0; text-decoration:none;}
#collection p a { line-height:183px;}
#collection span {float:left; display:block; width:220px; padding:0 3px 0 7px; text-align:center;}
#collection a span.sstitre  {  height:55px; color:#000000; font: normal 11px Arial; cursor:pointer;}
#collection a span  { font: bold 11px Arial; height:25px; color:#000000; cursor:pointer;}
#collection a:hover span{color:#000000; text-decoration:none; cursor:pointer;}

#concept { float: left; line-height: 1; font-weight: bold; padding: 0; margin: 10px 5px 20px 15px;}
#concept ul {float: left; width: 100%; list-style: none;}
#concept li {float: left; padding: 0;	width: 172px; height: 210px; margin: 0 17px 10px 0px; bottom:0;}
#concept img{ display:block; border: 0; margin:0 auto;}
#concept a { display: block; font: bold 13px Arial; color:#000000; margin:0; padding:0 0 0 0; text-decoration:none;}
#concept a span  { float:left; display:block; height:20px; width:155px; padding:0 3px 0 2px; text-align:center; color:#000000;}
#concept a:hover span{color:#000000; text-decoration:none;}

#racine { float: left; width:532px; line-height: 1; font-weight: bold; font-size:11px; padding: 0 8px 20px 10px; margin: 0;}
#racine img{ display:block; border: 0; margin:0 auto;}
#racine div#exaplus {float:left; margin: 0 0 0 10px; padding:5px 10px; border:1px solid #bcb0a9; border-radius:10px;-moz-border-radius:10px; -webkit-border-radius:10px; width:180px; background-color: #bcb0a9;}
#racine div#exaplus span{ font-size:14px; color:#FFFFFF; margin:0 0 2px 0; display:block;}
#racine div {float:left; margin: 0 0 0 0; padding:0; width:320px;}
#racine div ul{float: left; width: 100%; list-style: none; margin: 10px 0 0 0;}
#racine div li{float: left; padding: 0;	width: auto; margin: 0 0 0 5px;}
#racine div li a {display: block ; background: url(../img/02_exacompta_btn_proximite.png) left top no-repeat ; color: #fff ; font-size:12px; line-height: 27px ; padding: 4px 10px 4px 27px ; width:124px; text-align: left ; text-decoration: none ;}
#racine div li a:hover, #racine div li a:focus, #racine div li a:active {background: url(../img/02_exacompta_btn_proximite.png) left bottom no-repeat ;text-decoration: none;}
#racine div li.cc a {display: block ; background: url(../img/01_exacompta_btn_ligne.png) left top no-repeat ; color: #fff ; font-size:12px; line-height: 27px ; padding: 4px 10px 4px 30px; width:104px; text-align: left ; text-decoration: none ;}
#racine div li.cc a:hover, #racine div li#cc a:focus, #racine div li#cc a:active {background: url(../img/01_exacompta_btn_ligne.png) left bottom no-repeat ;text-decoration: none;}

#reference { float: left; width:250px; min-height:450px; border-width:0 0 0 2px; border-style:solid; border-color:#bcb0a9; line-height: 1; font-weight: bold; padding: 0 0 0 20px; margin: 0 18px 20px 0;}
#reference span{ font-size:11px; margin:15px 0 0 0; display:block;}
#reference span img{ float:left; width:28px; margin:0 15px 0 7px;}
#reference ul {display:block; line-height:100%;}
#reference ul#pictos{padding:0; margin:0 0; width: 180px; border:0px solid #a5a5a5; line-height:100%;}
#reference ul#pictos li {float:left; margin:7px 7px 7px 7px; display:inline; line-height:100%;}
#reference ul#pictos li a{line-height:100%; display:block;}
#reference ul#pictos li.bordure {margin:3px 3px 3px 3px;}
#reference ul#pictos li p{ border: 1px solid #797879; padding:3px 3px 3px 3px; line-height:100%;}
#reference ul#pictos li p a{line-height:100%;}
#reference ul#pictos li img {margin:0; width:28px; height:28px; display:inline; line-height:100%;}
#reference #pictosag ul{padding:0; margin:0 0; width: 280px; border:0px solid #a5a5a5; line-height:100%;}
#reference #pictosag ul li {float:left; margin:7px 5px 7px 5px; display:inline; line-height:100%;}
#reference #pictosag ul li a{line-height:100%; display:block;}
#reference #pictosag ul li#active {margin:3px 3px 3px 3px; border: 1px solid #797879; padding:3px 3px 3px 3px; line-height:100%;}
#reference #pictosag ul li p{ border: 1px solid #797879; padding:3px 3px 3px 3px; line-height:100%;}
#reference #pictosag ul li p a{line-height:100%;}
#reference #pictosag ul li img {margin:0;  height:72px; display:inline; line-height:100%;}
#reference div#evt {margin:0 0 10px 0; width:280px;}
#reference div#evt img{ display:inline; width:auto;}
#reference span#evt img{margin:0 0 10px 0; display:block; width:auto;}
#reference span#mat img{float:right; margin:0 0 0 11px; display:block; width:auto;}

#sidebar5 #pointvente{display:block; margin:30px 0 15px 15px; padding:0; width: 400px;}
#sidebar5 #pointvente a {color:#ffffff; text-decoration:none;}
#sidebar5 #pointvente a:hover {text-decoration:none;}
.bleu { color:#0099b1; font-size:14px; font-weight:700; margin:5px 0;}
.exa #sidebar5 div.pages {height:30px; font-size:12px; font-weight:bold; text-align:center; float:right; margin:10px 30px 10px 0;}
.exa #sidebar5 div.pages a.nav {}
.exa #sidebar5 div.pages a.navp { background: url(../img/gauche.png) 0 0 no-repeat; padding:4px 14px 4px 14px;}
.exa #sidebar5 div.pages a.navs { background: url(../img/droite.png) 0 0 no-repeat; padding:4px 14px 4px 14px;}
.exa #sidebar5 div.pages a {padding:0 1px; color:#a8988e; text-decoration:none; display:inline; width:25px;}
.exa #sidebar5 div.pages #activepage, .exa #sidebar5 div.pages a:hover {color:#57a368; text-decoration:none;}	
/******************/ 
/* Menu onglets pdv */
/******************/
.pdv {list-style: none ; margin: 30px 0 0 15px ; padding: 0 ; overflow: hidden ;		/* Création du contexte de formatage */}
.pdv li {float: left ; width: auto; margin: 0 ;color: #fff ;background: #c00 ;}
.pdv li a {display: block ; background: #900 url(../img/Ou_Acheter_eu.png) right top no-repeat ; color: #fff ; font: bold 14px Arial,sans-serif ; line-height: 18px ; padding: 5px 13px 9px 10px ; text-align: left ; text-decoration: none ;}
.pdv li a:hover, .pdv li a:focus {text-decoration: none;}
.pdv li a:active {background: url(../img/Ou_Acheter_eu.png) right top no-repeat ;text-decoration: none;}
.pdv #active a {background: url(../img/Ou_Acheter_eu.png) left top no-repeat ;text-decoration: none;}
.pdv li a.us {display: block ; background: #900 url(../img/Ou_Acheter_us.png) right top no-repeat ; color: #fff ; font: bold 14px Arial,sans-serif ; line-height: 18px ; padding: 5px 10px 9px 6px ; text-align: left ; text-decoration: none ;}
.pdv li a.us:hover, .pdv li a.us:focus {text-decoration: none;}
.pdv li a.us:active {background: url(../img/Ou_Acheter_us.png) right top no-repeat ;text-decoration: none;}
.pdv #active a.us {background: url(../img/Ou_Acheter_us.png) left top no-repeat ;text-decoration: none;}
<!--[if lt IE 7]>
.pdv {overflow: visible ; height: 1% ;}
<!--[endif]-->
    --> 
ul.pdvente {float:left; width:800px; display:block;}
ul.pdventes li {margin:0 1px 3px 0; font-weight:bold; width:200px; _width:200px; height:auto; float:left; background-color:#0099b1; color:#ffffff; display:inline;}
ul.head_pdvente {float:left; width:800px; display:block; margin:10px 0 0 0;}	
ul.head_pdvente li {margin:0 1px 3px 0; font-weight:bold; width:200px; _width:200px; height:auto; float:left;  background-color:#ffffff; border-bottom:none; color:#0099b1; display:inline; text-align:center;}
ul.head_pdvente li.papet {margin:0 1px 3px 0; font-weight:bold; width:200px; _width:192px; height:52px; float:left; background-color:#0099b1; color:#ffffff; display:inline; text-align:left; font-size:12px; padding:3px 5px 0 3px;}

/* style page contacts */
button, input, textarea, select {font: 11px Arial, Helvetica, sans-serif; color:#000000;}
.contact_form {background:url(../img/contact_bg.png) 0 0 no-repeat ; width:290px; height:535px; margin: 10px 0 0 0; padding:10px 20px 10px 10px; font-size:11px;}
.contact_form fieldset {}
.contact_form p {margin:2px 0 5px 0;}
.padd_10 {padding:10px 5px 0 5px;}
.padd_10_right {padding:0 5px 10px 5px;}
.tit_font14_blue {font-size:13px; font-weight:bold; color:#000000;}
.tit_green14px {color:#000000; font-weight:bold; font-size:12px; line-height:18px; margin-bottom:5px;}
.width_50 {width:50%;}
a.green_link {color:#000000;}
a.green_link:hover {text-decoration:none;}

.img_input { background:url(../img/input_contact.png) no-repeat left center; width:275px; height:30px; border:none; line-height:20px; padding:5px; margin:0px;}
.img_input[class] {display:block; height:20px; padding:5px;}
.img_textarea {background:url(../img/textarea.png) no-repeat scroll; width:275px; height:90px; border:none; padding:5px 5px 0px 5px; overflow:auto;}
.img_textarea[class] {width:280px; height:90px;}
fieldset {border: 0; padding:0;}

/* style page groupe */
.exa #sidebar6 {
    	float: left;  /* cet élément est flottant, il faut donc lui attribuer une largeur */
    	width: 841px;  /* Dans les navigateurs conformes au standard et dans Internet Explorer en mode standard, la largeur réelle de cet élément div est composée de la largeur plus le remplissage et la bordure */
    	background: #FFFFFF url(../img/fond_contenu.jpg) no-repeat; /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
    	padding: 0px 75px 30px 110px; /* le remplissage permet d'écarter le contenu de l'élément div des bords de celui-ci */
		margin: 0px 0px 50px 0px;
    }
.exa #sidebar6 #groupe {margin:20px 0px 20px 0;}
.exa #sidebar6 #groupe img {padding: 0 10px 0 0;}
.exa #sidebar6 #intro {width:700px;margin:auto;}		
.exa #sidebar6 #bloc_logo {height:105px;margin-bottom:15px;}
.exa #sidebar6 #bloc_presentation {background: #FFFFFF url(../img/fond_presentation.jpg) no-repeat; padding:25px 45px 10px 60px; height:700px }
.exa #sidebar6 #soustitre {height:75px;vertical-align:middle;}
.exa #sidebar6 #groupe h1 {	font-size: 36px;font-weight: 700;color: #0099b1;text-align:left;width:750px;}
.exa #sidebar6 .txt_soustitre {font-size: 24px;color: #766861;text-align:left;margin:0;padding-top:20px;}
.exa #sidebar6 .txt_intro {font-size: 14px;color: #766961;text-decoration:none;text-align:left; margin:25px 0 11px 0; display:block;}
.exa #sidebar6 .txt_intro_bold {font-weight:bold;}
.exa #sidebar6 .nom_bleu {	font-size:24px;font-weight:bold;color: #0099b1;line-height:24px;padding-top:15px;margin:0;}
.exa #sidebar6 .logo {padding-right:40px;}
.exa #sidebar6 .lien_vert {font-size:18px;font-weight:bold;color:#4fc813;line-height:18px; margin:10px 0;}
.exa #sidebar6 .lien_vert a {text-decoration:none;color: #4fc813; font-size:18px;}
.exa #sidebar6 .txt_left { float:left; font-size: 14px;color: #766961;text-decoration:none;text-align:left; margin:0; display:inline; width:340px;}
.exa #sidebar6 .txt_right { float:right; font-size: 14px;color: #766961;text-decoration:none;text-align:left; margin:0; display:inline; width:340px;}
.exa #sidebar6 a {text-decoration:none; color: #4fc813; font-size:12px;}
.exa #sidebar6 h2 {font-size:16px; padding:10px 0;}

/* STYLE POUR LIGHT WINDOW */
#lightwindow_overlay {
	/* REQUIRED */
	display: none;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 500;
	/* REQUIRED */
}

#lightwindow {
	/* REQUIRED */
	/* Of Note - The height and width of this element are set to 0px */
	display: none;
	visibility: hidden;
	position: absolute;
	z-index: 999;
	line-height: 0px;
	/* REQUIRED */
}

	#lightwindow_container {
		/* REQUIRED */
		display: none;
		visibility: hidden;
		position: absolute;
		/* REQUIRED */
		padding: 0 0 0 0;
		margin: 0 0 0 0;
	}

	/* IE6 needs this or it messes with our positioning */
	* html #lightwindow_container {
		overflow: hidden;
	}

	#lightwindow_contents {
		overflow: hidden;
		z-index: 0;
		position: relative;
		border: 10px solid #ffffff;		
		background-color: #ffffff;
	}		

#lightwindow_loading {
	/* REQUIRED */
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	z-index: 9999;
	position: absolute;
	/* REQUIRED */
	background-color: #f0f0f0;
	padding: 10px;
}

	#lightwindow_loading_shim { 
		display: none;
		left: 0px; 
		position: absolute; 
		top: 0px;
		width: 100%; 
		height: 100%;
	}

	#lightwindow_loading span {
    	font-size: 12px;
		line-height: 32px;
		color: #444444;
		float: left;
		padding: 0 10px 0 0;
	}

	#lightwindow_loading span a,
	#lightwindow_loading span a:link, 
	#lightwindow_loading span a:visited {
		color: #09F;
		text-decoration: none;
		cursor: pointer;
	}

	#lightwindow_loading span a:hover,
	#lightwindow_loading span a:active {
		text-decoration: underline;
	}


	#lightwindow_loading img {
   		float: left;
   		margin: 0 10px 0 0;
	}


/*-----------------------------------------------------------------------------------------------
	I liked the Navigation so much from http://www.huddletogether.com/projects/lightbox2/
	I mean let's face it, it works really well and is very easy to figure out.
-----------------------------------------------------------------------------------------------*/

#lightwindow_navigation {
	/* REQUIRED */
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	/* REQUIRED */
}
	/* We need to shim the navigation for IE, though its more of a sub-floor */
	#lightwindow_navigation_shim { 
		/* REQUIRED */
		display: none;
		left: 0px; 
		position: absolute; 
		top: 0px;
		width: 100%; 
		height: 100%;
		/* REQUIRED */
	}

	#lightwindow_navigation a,
	#lightwindow_navigation a:link,
	#lightwindow_navigation a:visited,
	#lightwindow_navigation a:hover,
	#lightwindow_navigation a:active { 
		/* REQUIRED */
		outline: none;
		/* REQUIRED */
	}

	#lightwindow_previous, 
	#lightwindow_next {
		width: 49%;
		height: 100%;
		background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
		display: block;
	}
	
	#lightwindow_previous { 
		float: left;
		left: 0px;
	}

	#lightwindow_next { 
		float: right;
		right: 0px;
	}

	#lightwindow_previous:hover, 
	#lightwindow_previous:active { 
		background: url(../images/prevlabel.gif) left 15% no-repeat; 
	}

	#lightwindow_next:hover, 
	#lightwindow_next:active { 
		background: url(../images/nextlabel.gif) right 15% no-repeat; 
	}
	
	#lightwindow_previous_title,
	#lightwindow_next_title {
		display: none;
	}
	 	
#lightwindow_galleries {
	width: 100%;
	position: absolute;
	z-index: 50; 
	display: none;
	overflow: hidden;
	margin: 0 0 0 10px;
	bottom: 0px;
	left: 0px;
}

	#lightwindow_galleries_tab_container {
		width: 100%;
		height: 0px;
		overflow: hidden;
	}

	a#lightwindow_galleries_tab,		
	a:link#lightwindow_galleries_tab,
	a:visited#lightwindow_galleries_tab {
		display: block;
		height: 20px;
		width: 77px;
		float: right;
		line-height: 22px;
		color: #ffffff;
		text-decoration: none;
		font-weight: bold;
		cursor: pointer;
		font-size: 11px;
		color: #ffffbe;
		background: url(../images/black-70.png) repeat 0 0 transparent;
	}
	
	* html a#lightwindow_galleries_tab,		

	* html a:link#lightwindow_galleries_tab,
	* html a:visited#lightwindow_galleries_tab {	
		background: none;
		background-color: #000000;
		opacity: .70;
		filter: alpha(opacity=70);
	}

	a:hover#lightwindow_galleries_tab,
	a:active#lightwindow_galleries_tab {
		color: #ffffbe;

	}

	#lightwindow_galleries_tab_span {
		display: block;
		height: 20px;
		width: 63px;
		padding: 0 7px 0 7px;
	}
	
	#lightwindow_galleries_tab .up	{
		background: url(../images/arrow-up.gif) no-repeat 60px 5px transparent;
	}

	#lightwindow_galleries_tab .down {
		background: url(../images/arrow-down.gif) no-repeat 60px 6px transparent;
	}

	#lightwindow_galleries_list {
		background: url(../images/black-70.png) repeat 0 0 transparent;
		overflow: hidden;
		height: 0px;
	}

	* html #lightwindow_galleries_list {
		background: none;
		background-color: #000000;
		opacity: .70;
		filter: alpha(opacity=70);
	}	

	.lightwindow_galleries_list {
		width: 200px;
		float: left;
		margin: 0 0 10px 0;
		padding: 10px;
	}

	.lightwindow_galleries_list h1 {	
		color: #09F;
		text-decoration: none;
		font-weight: bold;
		cursor: pointer;
		padding: 10px 0 5px 0;
		font-size: 16px;
	}

	.lightwindow_galleries_list li {
		margin: 5px 0 5px 0;
		list-style-type: none;
	}

	.lightwindow_galleries_list a, 
	.lightwindow_galleries_list a:link, 
	.lightwindow_galleries_list a:visited {
		display: block;
		line-height: 22px;
		color: #ffffff;
		text-decoration: none;
		font-weight: bold;
		cursor: pointer;
		padding: 0 0 0 10px;
		font-size: 11px;
	}

	.lightwindow_galleries_list a:hover, 
	.lightwindow_galleries_list a:active {
		background: #000000;
		color: #ffffbe;
		border-left: 3px solid #ffffbe;
		padding: 0 0 0 7px;
	}
		
#lightwindow_data {
	/* REQUIRED */
	position: absolute;
	/* REQUIRED */
}

	#lightwindow_data_slide {
		/* REQUIRED */
		position: relative;
		/* REQUIRED */
	}

	#lightwindow_data_slide_inner {
		background-color: #ffffff;
		padding: 0 10px 10px 10px;
	}

	#lightwindow_data_caption {
		padding: 10px 0 0 0;
		color: #666666;
		line-height: 25px;
		background-color: #ffffff;
		clear: both;
	}

	#lightwindow_data_details {
		background-color: #f0f0f0;
		padding: 0 10px 0 10px;
		height: 20px;
	}
	
	#lightwindow_data_author_container {
		width: 40%;
		text-align: right;
		color: #666666;
	 	font-style: italic;
		font-size: 10px;
		line-height: 20px;
		float: right;
		overflow: hidden;
	}
	
	#lightwindow_data_gallery_container {
		font-size: 10px;
		width: 40%;
		text-align: left;
		color: #666666;
		line-height: 20px;
		float: left;
		overflow: hidden;
	}
	
#lightwindow_title_bar {
	height: 25px;
	overflow: hidden;		
}

	#lightwindow_title_bar_title {
		color: #ffffbe;
		font-size: 14px;
		line-height: 25px;
		text-align: left;
		float: left;
	}

	a#lightwindow_title_bar_close_link,	
	a:link#lightwindow_title_bar_close_link,
	a:visited#lightwindow_title_bar_close_link {
		float: right;
		text-align: right;		
		cursor: pointer;
		color: #ffffbe;
		line-height: 25px;
		padding: 0;
		margin: 0;
	}
	
	a:hover#lightwindow_title_bar_close_link,
	a:active#lightwindow_title_bar_close_link {
		color: #ffffff;
	}

/*-----------------------------------------------------------------------------------------------
	Theme styling stuff
-----------------------------------------------------------------------------------------------*/	

#lightwindow p {
	color: #766961;
	padding-right: 10px;
	font-size:13px;
}


/* SpryFormValidation.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */


/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}



/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	background-color: #B8F5B1;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #FF9F9F;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText{
	color: red !important;
}