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

/***** Structure générale header, body, footer  *****/

div.form {
	position:relative;
	/*border: 1px solid #999;*/
	float: left;
	width: 100%;
}

#form-overlay{
	position: absolute; 
	top: 0; left: 0; 
	z-index:500;
	display:none;
	width: 100%; 
	height: 500px; 
	background-color:#000;
}
#form-overlay-content{
	position: absolute; 
	top: 0; left: 0; 
	z-index: 600;
	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 #CCC;
	background-color:#FFF;
}

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

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

div.form .footer, div.form .header-actions {
	margin: 2px;
	padding: 10px 12px;
	background-color:#E7EBEF;
	clear: both;
	text-align: right;
}

div.form .body {
	padding:0;
}

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


/***** Structurant pour éléments de formulaire *****/

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

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

form div.col{
    float:left;
    width:50%;
}
form div.col.c-3{
    width:33%;
}
form div.col.c-3 label {
	width:12em;
	text-align: left;
	float: none;
}

form div.col.c-4{
    width:25%;
}


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

/* fieldset */

fieldset {
	float: left;
	clear:both;
	width: 100%;
	margin: 10px 0 18px 0;
	padding:12px 0px;
    border: 1px solid #CCC;
    -moz-border-radius:4px;
}


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


legend {
	margin:0 20px; padding: 0 8px;
	color: #000;
	font-weight:bold;
	font-family:"Trebuchet MS",Georgia,Arial ;
	font-size: 16px;
	color:#333;
}

/*-------------------- hint & help ---------------*/

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

div.hint{
	margin-left:17em; /* same as label width */
}


.fieldset-help, .form-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, .form-help .example {
	color:#888;
}
.fieldset-help p.example, .form-help p.example {
	margin-top:10px;
}



/*-------------------- textfield, textarea, password ---------------------*/

input, textarea, select, button {
	font-family: Arial;
	font-size:12px;
	line-height:1.2em;
}

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

input.text, input.date, input.time, input.password,input.file {
	color: #666;
	border: 1px solid #BBB;
	vertical-align: middle;
	background:url("../images/input-bg.gif") no-repeat;
	width: 200px;
	padding: 2px;
}

input.text:disabled,input.password:disabled {
	background:none;
	background-color:#F9F9F9;
	border: 1px solid #E0E0E0;
	color:#CCC;
}

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

input.text:disabled:hover,input.password:disabled:hover {
	border-color:#E0E0E0!important;
}

input.number {
	width:60px;
}
input.date {
	width:80px;
}

input.time {
	width:60px;
}

.textarea {
	width: 440px;
	height: 150px;
	background:url("../images/input-bg.gif") no-repeat;
	border: 1px solid #BBB;
	padding:5px;
	color: #666;
}




/*-------------------- file ---------------*/

/* It is not possible to style a file */
input.file {
	border: 1px solid #BBB;
	background:url("../images/input-bg.gif") no-repeat;
}

input.file {
	border: 1px solid #BBB;
	background:url("../images/input-bg.gif") no-repeat;
}

.file-container.photo{
	background:url("../images/file-upload-photo.gif") no-repeat;
	/*padding-left:28px;*/
}
.file-container.video{
	background:url("../images/file-upload-video.gif") no-repeat;
	padding-left:28px;
}
.file-container.download{
	background:url("../images/file-upload-download.gif") no-repeat;
	padding-left:28px;
}

.file-box{
    margin-left:15em;/*same as label*/
}

form .visuel{
    margin:0 0 2px 0;
}
form .visuel img{
    border:1px solid #BBB;
    padding:2px;
}

form p.filename{
	float: none;
	clear:none;
    font-size:10px;
    color:#999;
    padding-top:1px;
    padding-bottom:8px;
}

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

input.checkbox{
	margin-right:3px;
	vertical-align:middle;
	border: 1px solid #BBB;
}


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

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


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




 /*---- 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:4px;
	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;
}



/*---------------- Many to many ------------------*/


.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: 70px;
}
.manytomany-checkgroup select.last{
    margin-right:0;
}

.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;
}

/*-------------------- 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;
}

/*----  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;
	width:auto;
}

.form-layout-inline label.checkbox{
    display: inline;
	vertical-align:bottom;
}

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


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

label em{
   color:red;
}

/*-------------------- messages d'erreurs ---------------*/

/* span.form-counter-helper est utiliser pour afficher le nombre de caractères ou de mots
   entrer dans un champ text ou texarea.
*/



label.error, .form-counter-helper.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.valid, .form-counter-helper.valid {
	float: none;
	display: inline;
	background: url(../images/form-field-valid.gif) left center no-repeat;
	padding-left: 25px;
	color:green;
}


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

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

input.valid {
	
}

label.checkbox {
	font-size: 11px;
}