/*-------------------- Form Layout ---------------*/

/* Initialisation de base */
fieldset {
	margin:1.5em 0 0 0;
	padding:0;
	clear:both;
}

legend {
	margin-left: 1em;
	color: #000000;
	font-weight:bold;
	font-family:"Trebuchet MS",Georgia,Arial ;
	font-size: 16px;
}

form p {
	padding-bottom: .7em;
}

/* ou si utilisation de ol li */
form ol {
	padding: 1em 1em 0 1em;
	list-style: none;
}

form li {
	padding-bottom: 1em;
}

fieldset.formactions {
	border-style: none;
}


/*----  Mise en forme avec les labels au dessus des éléments de formulaire ------*/


.form-layout-inline label {  
    display:inline;
    float:none;
	margin:0;
	text-align:left;
}

table.form-layout-inline{
	border-collapse: collapse;
}
table.form-layout-inline td{
	padding:1px 8px;
}
 



 /*---- Avec label aligné à droite ou gauche des éléments du formulaire  ---------*/ 
 
/* pour label à gauche ou droite changer text align */
label {
	float:left;
	width:15em;
	margin-right: 1em;
	padding-top: 2px;
	text-align: right;
}

label.nofloat {
	float:none;
	padding-top: 2px;
	text-align: right;
}

label.right nofloat {
	vertical-align: middle;
}

label.disabled {
    color:#AAA;
}



form p {
	float: left;
	clear: left;
	width: 100%;
	padding-bottom: 1em;
	margin: 0;
}

form div.row {
	float: left;
	clear: left;
	width: 100%;
	padding-bottom:8px;
	margin: 0;
}

form div.col{
    float:left;
    width:49%;
}
form div.col.c-3{
    width:33%;
}
form div.col.c-4{
    width:25%;
}

/*Mise en forme avec les labels au dessus des éléments de formulaire*/
form div.row.label-top label, form div.col.label-top label {  
    display:block;
    float:none;
	margin:0;
	text-align:left;
}



form li {
	float: left;
	clear: left;
	width: 100%;
	padding-bottom: 1em;
}

fieldset {
	float: left;
	clear: left;
	width: 100%;
	margin: 0 0 1.5em 0;
	padding: 0;
}

fieldset.formactions {
	float: none;
	width: auto;
	border: 0 none #FFF;
	padding-left: 12em;
}

.form hr{
    clear:both;
    height:1px; 
    margin:20px; 
    border-top:1px solid #CCC; /* #FFCC00 */
    border-bottom:none; 
}



/*-------------------- mise en forme label, fieldset, legend ---------------------*/
label.checkbox{
	float:none;
    display: inline;
	vertical-align:bottom;
}

fieldset {
	border: 1px solid #CCC;
	padding:12px 0px;
	margin-bottom: 20px;
}

fieldset.main {
	background:#FFFFCC url("../images/fliedset-main-bg.jpg") repeat-x top;
}


legend {
	padding: 0 8px;
	color:#333;
}

p.fieldset-help {
	/*margin:1em;*/
	padding:0 1em 1.5em 2.5em;
	width: 92%;
	background:url("../images/fieldset-help.gif") no-repeat 8px 3px ;
	/*border:1px solid #F4CB0A;
	background-color: #FFF;*/
}

.fieldset-help .example {
	color:#888;
}
.fieldset-help p.example {
	margin-top:10px;
}


.element-group{
	
}
.element-group label{
	float:none;
}

.manytomany-checkgroup label{
    float:left;
    width:30%;
    margin-bottom:10px;
    text-align:left;
    line-height:1.8em;   
}

.manytomany-checkgroup.select label{
    width:27%;
}
.manytomany-checkgroup select{
    margin-right: 45px;
}

.manytomany-checkgroup input{
    float:left;
}

.manytomany-checkgroup select{
    float:left;
}

.manytomany-checkgroup h3{
    clear:both;
    margin:15px 0 10px 0; padding-bottom:4px;
    border-bottom: 1px solid #CCC;
    color:#333;
    font-size:12px;
    font-family:Verdana,Arial,Helvetica,sans-serif;
}


/*-------------------- mise en forme générale ---------------*/

div.form {
	position:relative;
	border: 3px solid #EFEFEF;
	float: left;
	width: 100%;
}

#form-overlay{
	position: absolute; 
	top: 0; left: 0; 
	z-index: 90;
	display:none;
	width: 100%; 
	height: 500px; 
	background-color:#000;
}
#form-overlay-content{
	position: absolute; 
	top: 0; left: 0; 
	z-index: 100;
	display:none;
	width: 100%; 
	height: 500px; 
	background-color:transparent;
	text-align:center;
}

#form-overlay-content-inner{
	width:300px;
	margin:auto; padding:10px;
	border:1px solid #16A2E4;
	background-color:#FFF;
}

div.form .header {
	margin:3px;
	padding:8px 8px 20px 8px;
	background-color: #1071A2;
	clear: both;
	color: #FFF;
}

div.form .header h2 {
	color:#FFF;
	font-size:15px;
	margin:0;
}

div.form .footer {
	margin: 3px;
	padding: 10px 12px;
	background-color: #E4F4FC;
	clear: both;
	text-align: right;
}

div.form .body {
	padding: 15px;
}

div.form form {
	border: 1px solid #9CD7F3;
	background-color: #FCFDFE;
}

input,select,textarea,button {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.35;
}

.textfield:focus,select:focus,textarea:focus,.button:hover,.input:hover
	{
	background-color: #FFF;
	outline: 1px solid #D6FFC9;
}

/*-------------------- textfield, textarea, password ---------------------*/
input.text,input.password,  textarea.textarea{
	color: #666;
	font-size:11px;
	border: 1px solid #7F9DB9;
	vertical-align: middle;
}
textarea.textarea{
	padding:3px 5px;
}

input.text,input.password {
	width: 200px;
	padding: 2px;
}

input.text:hover,input.text:focus,input.password:hover,input.password:focus
	{
	border-color: #66DD55 rgb(85, 187, 85) rgb(69, 148, 85);
}

input.number {
	width:60px;
}

.textarea {
	width: 400px;
	height: 100px;
}


input.date {
	width:80px;
	vertical-align:middle;
}



/*-------------------- select ---------------*/
select {
	background-color: #FEFEFE;
	border-color: #C4CCCC rgb(172, 181, 181) rgb(111, 119, 119);
	border-style: solid;
	border-width: thin;
	padding:1px;
	color: #555;
}

select:hover,select:focus {
	border-color: #66DD55 rgb(85, 187, 85) rgb(69, 148, 85);
}

/*-------------------- checkbox & radio ---------------*/

input.checkbox{
	vertical-align:middle;
}

/*-------------------- hint ---------------*/

span.hint{
   color:#AAA;
   font-size:10px;
}


/*-------------------- champ requis ---------------*/

label em{
   color:red;
}


/*-------------------- Données présenté dans un tableau ---------------*/

table.form-data {
   border-spacing:3px;
}

table.form-data th {
	/*text-align:right;*/
	font-weight:bold;
	color:#777;
}

/*-------------------- messages d'erreurs ---------------*/
label.error {
	float: none;
	background: url(../images/form-field-error.gif) 0 3px no-repeat;
	margin-right:0;
	margin-left:5px;
	padding: 2px 0 2px 18px;
	color: #FF0000;
	font-weight: bold;
	text-align: left;	
}

label.standalone {
	display:block;
	margin: 10px 0;
}

label.valid {
	float: none;
	display: inline;
	background: url(../images/form-field-valid.gif) left center no-repeat;
	padding-left: 25px;
	color:green;
}

input.error,input.over:focus,input.error:focus {
	border: 1px solid #FF0000;
}

input.valid {
	
}

label.checkbox {
	font-size: 11px;
	margin-right:0;
	vertical-align:middle;
}