/*
* class && id principaux
*/

/* contraint toute l'application */
#application{
 width:			100%;
}

/* header */
#header{
 height: 		122px;
 width:			100%;
 background:		url(../media/image/haut_fond.gif) 0 0 ; 
 background-position:	left top; 
}
/* Logo */
#logo{
 height: 		122px;
 width:			100%;
 background:		url(../media/image/haut_logo_main.gif) 0 0 no-repeat; 
 background-position:	left top; 
}
/* footer */
#footer{
 background:		url(../media/image/bas_fond.gif) 0 0 ; 
 width:			100%;
 height:		24px;
}
#footerlogo{
 width:			710px;
 height:		24px;
}


/************************************************************************
* bloc principal (data) */
#data{
 margin-left:		205px;
 margin-right:		10px;
}
#data .box{
 width:			98%;
 border:		1px solid #333366;
 border-bottom:		3px solid #333366;
 vertical-align:	top;
 }
#data .box .box{
 width:			100%;
 border:		0;
 border-top:		1px solid #333366;
}
/*#data .box div{width:100%;}*/
#data div{
 text-align:		left;
 width:			99%;
}
#data div div{
 width:			100%;
}
#data legend{
 padding:		4px;
 font-weight:		normal;
}

#data label{
 float:			left;
 width: 		145px;
 font-weight:		normal;
 text-align:		right;
}
#data .labelbig{
 float:			left;
 width: 		180px;
 font-weight:		normal;
 text-align:		right;
}
#data .labelverybig{
 float:			left;
 width: 		260px;
 font-weight:		normal;
 text-align:		right;
}
#data .boxcheck .labelbig{
 display:		block;
 float:			left;
 width: 		180px;
 font-weight:		normal;
 text-align:		right;
}
#data input{
 width:			166px;
 vertical-align:	middle;
}
#data select{
 right: 		0;
 width:			204px;
 vertical-align:	middle;
 margin-bottom:		4px;
}
#data .selectsmall{
 width:			180px;
}
#data .fieldshort input{
 display:		block;
 float:			left;
 width:			49%;
}
#data .fieldshort input{
 width:			20px;
}
#data .fieldshort select{
 width:			168px;
}
#data .selectbig{
 width:			190px;
}
#data textarea{
 right: 		0;
 width:			203px;
 vertical-align:	middle;
}
#data .textareacomm{
 width:			166px;
}
#data .textareasyndic{
 right: 		0;
 width:			99%;
 margin:		3px;
 vertical-align:	middle;
}
#data h1, #data h2, #data h3{
 padding-left:		2px;
}
#data .selectGroup select{
width:			230px;
}

#data .box ul{padding-left:20px;}

/************************************************************************
* gestion des fieldset (-> cas a gerer: dans .box et en dehors )*/

#data .fieldsetinstall{
 display:		block;
 width:			65%;
 border:		1px solid #333366;
 margin:		15px;
 margin-top:		2px;
 margin-bottom:		3px;
}
#data .fieldsetinstall legend{
 font-weight:		bold;
}
#data .fieldsetinstall .colorEtape{
 background-color:	#333366;
 color:			#FFFFFF;
}
#data .fieldsetinstall .colorEtape strong{
 color:			#FFFFFF;
}


#data .fieldset, #data .confirm{
 display:		block;
 border:		1px solid #333366;
 margin:		15px;
 margin-top:		2px;
 margin-bottom:		3px;
}

#data .fieldset fieldset{
 display:		block;
 border:		1px solid #333366;
 margin:		15px;
 margin-top:		2px;
 margin-bottom:		3px;
}
#data .fieldset legend, #data .confirm legend{
 font-weight:		bold;
}
#data .fieldset select{
 margin-top:		2px;
}
/* ---> Pour les suppressions (voir aussi la classe important)*/
#data .confirm{
 border:		1px solid #333366;
}
#data .confirm legend{
 color:			#333366;
}
#data .confirm .action {
 border-top:		1px solid #333366;
 background-color: 	#E7EAED;
 width:			100%;
}
#data .confirm .action .next{
 width:			50px;
 height:		22px;
}
/************************************************************************
* fin gestion des fieldset 
*/



/************************************************************************
* Classes utiles
*/
.important{
 display:		inline;
 color:			rgb(255, 153, 0);
 padding:		4px;
 font-weight:		bold;
}

#data .field{
 display:		block;
 float:			left;
 width:			49%;
}

#data .tabledetail .field{
 height:		20px;
}

#data .field label, #data .field .label{
 height:		20px;
}
#data .fieldset .field img{
 padding-right:		2px;
 padding-left:		1px;
}
#data .txt{
 display:		block;
 float:			left;
 font-weight:		bold;
 width:			100%;
 padding:		10px;
}
#data .txt p{
 display:		inline;
 float:			left;
 width:			100%;
 padding:		2px;
}
#data .boxcheckextend label{
 display:		block;
 width:			140px;
}
#data .boxcheckextend input{
 width:			13px;
 border:		0;
}
#data .boxcheck{
 display:		block;
 width:			20%;
 float:			left;
}
#data .boxcheck label{
 width:			120px;
 padding-top:		2px;
 float:			left;
 font-weight:		normal;
}
#data .boxcheck input{
 width:			13px;
 border:		0;
}
/************************************************************************
* fin classe utiles
*/


/************************************************************************
* Definition des .tableaux de presentation par defaut
*/
#data .table{
/*  display:		block; */
 float:			right;
 border-spacing:	1px;
 width:			100%;
 clear:			both;
}
#data .fieldset .table caption{
 display:		none;
}
#data .table th{
 background:		#333366;
 color:			#FFFFFF;
 text-align:		center;
 font-weight:		bold;
 padding-left:		10px;
 padding-right:		10px;
 white-space:		nowrap;
}
#data .table .thsmall{
 width:			200px;
 background:		#FFFFFF;
 color:			#FF0000;
 text-align:		center;
 font-weight:		bold;
 padding-left:		10px;
 padding-right:		10px;
 white-space:		normal;
}
#data .table th a{
 color:			white;
}
#data .table tr{
 background:		#333366;
 vertical-align:	top;
}
#data .table tr td{
 background:		#E7EAED;
 text-align:		left;
 padding:		1px 1px 1px 1px;
 font-size:		xx-small;
}

#data .table tr td input{width:98%}

#data .table tr td *{
 font-size:		xx-small;
}
#data .table tr:hover td{}
#data .table caption{
 display:		block;
 font-weight:		bold;
 text-align:		left;
 padding:		15px 0 4px 15px;
}
#data .table tr td a{
 background-position:	center;
 width:			auto;
}
/* Si il ya un style de ligne */
#data .table .lineStyle1 td, #data .table .lineStyle1  td a,#data .tabledashboard .lineStyle1 td, #data .tabledashboard .lineStyle1  td a{
 background-color: 	#E7EAED;
}
#data .table .lineStyle2 td,#data .table .lineStyle2  td a,#data .tabledashboard .lineStyle2 td,#data .tabledashboard .lineStyle2  td a{
 background-color:	#c1d2ee;
}
/* voir aussi la classe list et action!!! */
/************************************************************************
* Fin des .tableaux 
*/

#data iframe{width:100%;}

/* sert pour la gestion des options d'affichage */
.option{
 padding:		2px;
 border-bottom:		1px solid #333366;
}
.clean{
 display:		block;
 padding:		4px;
 clear:			both;
 width:			100%;
}
.nodisplay{
 display:		none;
}
.fieldinfo{
 display:		inline;
 position:		relative;
 top:			2px;
 width:			100px;
 padding-top:		3px;
 vertical-align:	bottom;
}
.preview{
 border:		1px solid #333366;
 width:			auto;
 float:			right;
 height:		156px;
 margin: 		4px 4px 4px 5px;
}
/* cahmps obligatoiress*/
#data .require{
 }
/* liste simples ... */
.list{
 display: 		block;
 float:			left;
 width:			50%;
}

#data .table a, #data .table input{ width:90px; margin:3px;}
#data .table ul, .list{ padding-left:20px; list-style:square;}


/* D�laration des ��ents par defaut d'une ligne de detail.. .*/
#data .tabledetail,#data .tabledetail td{
 background-color:	#E7EAED;
 border:		1px solid #c1d2ee;
 text-align:		center;
 padding-bottom:	3px;
 margin-bottom:		3px;
}
#data .tabledetail .fieldset{padding:0px;margin:0px;border:0px;} /*IE 6*/
#data .tabledetail .fieldset label{text-align:left;font-weight:bold;}
#data .tabledetail .fieldset legend{display:none;}


/* style pour la legende */
#data .legendcolor {width:auto;display:block;padding: 5px 0px 10px 13px;}
#data .box .legendcolor div,#data .legendcolor div{display:inline;width:auto;border:0;}
#data .legendcolor .linkdelete,#data .legendcolor .linkview,#data .legendcolor .linkupdate,#data .legendcolor .linkadd,#data .legendcolor .linksave,#data .legendcolor .linknext,#data .legendcolor .linkback,#data .legendcolor .linkconfig{background-color:transparent;}

#data .legendcolor div{ float:left;width:auto;height:20px;}
#data .box .legendcolor .lnColor0, #data .box .legendcolor .lnColor1, #data .box .legendcolor .lnColor2, #data .box .legendcolor .lnColor3, #data .legendcolor .lnColor0, #data .legendcolor .lnColor1, #data .legendcolor .lnColor2, #data .legendcolor .lnColor3{
 display:		block; 
 margin:		0px 5px 0px 5px;
 border:		1px solid #000000;
 width:			10px;
 height:		10px;
}
/* code de validation dans un .tableau...*/
#data .lnColor0, #data .table .lnColor0, #data .table .lineStyle1 .lnColor0, #data .table .lineStyle2 .lnColor0{background-color:#FFFFFF;}				/* actif/publie */
#data .lnColor1, #data .table .lnColor1, #data .table .lineStyle1 .lnColor1, #data .table .lineStyle2 .lnColor1{background-color:rgb(255, 153, 0);}			/* en attente*/
#data .lnColor2, #data .table .lnColor2, #data .table .lineStyle1 .lnColor2, #data .table .lineStyle2 .lnColor2{background-color:#FF0000;}				/* archive*/
#data .lnColor3, #data .table .lnColor3, #data .table .lineStyle1 .lnColor3, #data .table .lineStyle2 .lnColor3{background-color:#98F01D;}				/* archive*/

/*Style de couleur pour la gestion des quotas*/
/* style pour la legende */
#data .box .legendcolor .styleSend, #data .box .legendcolor .styleNew, #data .box .legendcolor .styleRead,#data .legendcolor .styleSend, #data .legendcolor .styleNew, #data .legendcolor .styleRead{
 display:		block; 
 margin:		0px 5px 0px 5px; 
 border:		1px solid #E7EAED;
 width:			10px;
 height:		10px;
}
#data .box .legendcolor .linkview,#data .box .legendcolor .linkdelete,#data .box .legendcolor .linksave,#data .box .legendcolor .linkupdate,#data .legendcolor .linkview,#data .legendcolor .linkdelete,#data .legendcolor .linksave,#data .legendcolor .linkupdate,#data .legendcolor .linkadd{
 display:		block; 
 margin:		-5px -10px 0px 5px; 
 width:			10px;
 height:		15px;
}

 
/* code de validation dans un .tableau...*/
#data .styleSend, #data .table .styleSend, #data .table .lineStyle1 .styleSend, #data .table .lineStyle2 .styleSend{background-color:#FFFFFF;}				/* actif*/
#data .styleNew, #data .table .styleNew, #data .table .lineStyle1 .styleNew, #data .table .lineStyle2 .styleNew{background-color:rgb(255, 153, 0);}			/* en attente*/
#data .styleRead, #data .table .styleRead, #data .table .lineStyle1 .styleRead, #data .table .lineStyle2 .styleRead{background-color:#c1d2ee;}				/* actif*/

/************************************************************************
* -> Gestion des onglets
*/
.tabe{vertical-align:bottom; width:100%;height:20px;}
.tabe ul {
 display:		block; 
 height:		20px;
 list-style:		none;
 vertical-align:	bottom;
 width:			100%;
}
.tabe ul li {
 height:		19px;
 list-style:		none;
}
.box .tabe ul{
 display:		inline;
 width:			auto;
 margin-left:		auto;
 margin-right:		0px;
 padding-right:		0px;
 float:			right;
}
.box .tabe ul li{
/* display:inline; */
 margin-right:		0px;
 padding-right:		0px;
/* float:right; */
}
/* style des onglets */
.WindowTabeData,  .WindowTabeDataSelected{
 background-color:	#E7EAED;
 border:		1px solid #333366;
 border-bottom:		0;
 float:			left;
 width:			180px;
 vertical-align:	bottom;
}

.WindowTabeData a, .WindowTabeDataSelected a{
 display:		block;
 font-weight:		bold;
 text-decoration:	none;
}
.WindowTabeData{}
.WindowTabeDataSelected{}
.WindowTabeDataSelected a{background-color:#333366; color:#FFFFFF;}
/* events */
.WindowTabeData a:hover,.WindowTabeDataSelected a:hover{background-color:#c1d2ee;color:#333366;}
/************************************************************************
* -> Fin gestion des onglets
*/





/************************************************************************
* informations de l'objet 
*/
/* utilise pour les headers*/
#data .header{
 width:			100%;
 padding:		3px 0 10px 0;
}
#data .header h1,#data .header h2,#data .header h3{
/* padding-top:5px;
 padding-bottom:5px;*/
 display:		none;
}
#data .header p{
 display:		block;
 background:		url(../media/picto/puce.gif)  0 2px no-repeat;
 padding:  		0 10px 0 10px;
 margin-left: 		2px;
 vertical-align:	top;
}
/* Utilise pour les infos contextuelles*/
#data .info{
 width:			99%;
 border:		0;
 padding:		4px;
 text-align:		center;
}
#data .info h1,#data .info h2,#data .info h3{
 padding-top:		5px;
 padding-bottom:	5px;
}
/************************************************************************
* Fin informations 
*/


/************************************************************************
* legende d'un .tableau 
*/
#data .legend{
/*  display:		block; */
 float:			right;
 background: 		#FFFFFF;
 width:			auto;
 height:		30px;
 padding: 		5px 10px 5px 10px;
 margin:		0px;
}
#data .formNode{
 display:		inline;
 float:			left; 
 background: 		#FFFFFF;
 vertical-align:	middle;
 padding-bottom:	20px;
 width:			40%;
}
#data .formNode select{
 width:			300px;
}
#data .box .legend div,#data .legend div{display:inline;width:auto; border:0; padding-left:18px;background-color:#FFFFFF;margin-left:5px;}
/************************************************************************
* Fin legende */


/************************************************************************
* barres de boutons 
* action -> sert g��iquement pour encadrer des boutons
*     dans un .tableau il contient 2 colonne de bouton sinon utiliser actionOne
* actionOne sert dans un .tableau pour une colonne action restreinte
* actionA sert quand une barre d'action ne possede que des liens ( pas dans un .table)
*/
#data .action, #data .actionOne, #data .actionA{
 text-align:		center;
 width:			100%;
 border-top: 		1px solid #333366;
 background:		#E7EAED;
 padding: 		0 0 0 0;
 height:		22px;
 clear:			both;
 vertical-align:	top;
}
#data .action input, #data .action a, #data .actionOne input, #data .actionOne a, #data .actionA a{
 width:			90px;
 margin:		0;
}
#data .action a, #data .actionOne a, #data .actionA a{
/* font-size:100%;*/
 height:		17px;
}
#data .action .buttonfreesize, #data .actionA .buttonfreesize, #data .actionOne .buttonfreesize{
 width:			auto;
}
#data .action input, #data .action a, #data .actionA a{display:inline;}
#data .actionA{padding-top:5px;height:17px;}
#data .actionA a{display:inline;background-position:2px 2px;width:100px;}
#data .action > a, #data .actionOne >a{padding:2px 5px 6px 26px; background-position:0 0;line-height:19px;border-top:2px solid #333366}
#data .table .action, #data .table tr .actionOne{ border-top:0;  padding:0; margin:0; height:22px;width:125px;}
#data .table .actionOne{width:63px;}
#data .table .action a, #data .table tr .actionOne a{ display:block;float:left;width:25px; border:0px; padding-left:0;}
#data .action .boxcheck input, #data .actionOne .boxcheck input{width:12px; border:0; text-align:center;background-color:transparent;margin:0 20px 0 20px}
/************************************************************************
* plus d'elements dans boutton.css 
*/


/************************************************************************
* ��ents du lexique
*/
.lexiqueLink:link  {color: #333366; font-weight: bold; font-size: 10px;text-indent: 2px }
.lexiqueLink:hover  {color: #333366; font-weight: bold; font-size: 10px;text-indent: 2px }
.lexiqueLink:visited  {color: #333366; font-weight: bold; font-size: 10px;text-indent: 2px }
.lexiqueLink:active  {color: #333366; font-weight: bold; font-size: 10px;text-indent: 2px }

.noLexiqueLink:link  {color: #DDDDDD; font-weight: bold; font-size: 10px;text-indent: 2px }
.noLexiqueLink:hover  {color: #DDDDDD; font-weight: bold; font-size: 10px;text-indent: 2px }
.noLexiqueLink:visited  {color: #DDDDDD;font-weight: bold; font-size: 10px;text-indent: 2px }
.noLexiqueLink:active  {color: #DDDDDD; font-weight: bold; font-size: 10px;text-indent: 2px }

#data .index{display:block;float:left; width:auto;}
#data .def{padding:2px; width:99%}

#data .leftlist label{
 float:			left;
 display:		block;
 width:			170px;
}
#data .rigthlist ul{
 float:			right;
 display:		block;
 width:			100%;
}
/*
* fin lexique
*/

/* classe pour l'�iteur wiziwig */
/*#data .freeStyle *, #data .freeStyle * *, #data .freeStyle * * *, #data .freeStyle .table, #data .freeStyle .table tr, #data .freeStyle .table tr td, #data .freeStyle ul, #data .freeStyle ul li, #data .freeStyle h1, #data .freeStyle h2, #data .freeStyle h3, #data .freeStyle h4{
 width:auto;
 font-size:auto;
 padding:auto;
 margin:auto;
 background-color:auto;
 list-style:auto;
 display:auto;
}*/

/*
* Fin du main
*/