/* @override http://127.0.0.1/SitiPicov/AlunniCachemere/www.alunni.net/_templates/alunnicashmere/css/forms.css */

.elf-form {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	border: 0;
	font-size: 14px;
	/*font-family: Arial, Helvetica, sans-serif; */
	/*overflow1: hidden;  (oppure auto) FIX SAFARI/FIREFOX su altezza del DIV < contenuto */
}

.elf-form hr {
	border: 0;
	border-top: 1px #ccc solid;
	height: 1px;
}




/* STILI LAYOUT */
.elf-form-page {
	padding: 0px;
}
.elf-form-section {
	margin-bottom: 8px;
}
fieldset.elf-form-fieldset {
	border-top: 1px #ccc solid;
}
fieldset.elf-form-fieldset p {
	padding-left: 2px;
	padding-right: 0px;
	padding-top: 2px;
	padding-bottom: 2px;
	color: #999;
}

legend.elf-form-legend {
  	font-weight: bold;
  	font-size: 12px;
	color: #4e7c0d;
	margin-left: 0px;
	border: 1px solid #ccc;
	padding: 3px 6px;
	margin-bottom: 8px;
}
.elf-form-row {
	display: table;
	table-layout: fixed; /* le celle vengono ripartite uniformemente e non in base al loro contenuto -> great!*/
	width: 100%;
}
.elf-form-column {
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 0;
	padding-bottom:0;
	display: table-cell;
	vertical-align: top; /* cosi posso visualizzare il processing message dopo il campo ed i campi sulla stessa riga rimangono allineati (oppure metto qui bottom e visualizzo il messaggio prima) */
}

/* force switch to stacked layout */
.elf-form-single-column-mode .elf-form-column {
	display: block;
}
/* iPhone 4S,5,5S,SE portrait and below */
@media (max-width: 768px) {
.elf-form-column {
	display: block;
}
}


/* Wrapper per ciascun elemento del form */
.elf-form-item {
	margin-bottom: 8px; /* Spaziatura verticale (anche fra i campi di una stessa colonna) */
	color: #333;
/*	
	background-color: #fefefe;
	border-radius: 10px;
	padding: 8px;
	padding-top: 0;	
	border: 1px #ccc solid;
*/
}




.elf-form-item-error {
	display: block;
	padding-left: 4px;
	border-left: 2px red solid;
	padding-bottom: 0;
}
.elf-form-item .elf-processing-message {
	display: block;
	color:  green;
	font-size: 90%;
}
.elf-form-item-error .elf-processing-message {
	color:  red;
}




/* Stili dei campi del form */
.elf-form-item label { /* con la discendenza diretta .elf-form-item > label escluderei le label dei checkbox e radio ma anche quelle degli elementi con div innestati -> ridefinisco gli stili delle label rispetto a questo */
	font-weight: normal;
	color:  #333;
	/*display1: inline; messo per gestire il simbolo mark campo abbligatorio */ /* BLOCK */
	display: block;
	padding: 2px;
	padding-top: 4px;
	padding-bottom: 2px;
	margin: 0;
}
input {
	font-family: inherit;
	font-size: inherit;
	display: block;
	background-color: #fff;
	color: #333;
}
input.align-left {
	text-align: left;
}
input.align-center {
	text-align: center;
}
input.align-right {
	text-align: right;
}
input.elf-field-hidden {
}

input.elf-field-text {
	width: 100%;
	width: calc(100% - 10px); /* (padding+border)*2 */
	padding: 4px;
	height: auto; /* Eliminare per bootstrap o mettere auto che interferisce meno */
	border: 0;
	border:  1px #ddd solid;
	background-color: #f9f9f9;
}
input.elf-field-password {
	width: 100%;
	width: calc(60% - 10px); /* (padding+border)*2 */
	padding: 4px;
	height: auto; /* Eliminare per bootstrap o mettere auto che interferisce meno */
	border: 0;
	border:  1px #ddd solid;
	background-color: lightyellow;

}
textarea.elf-field-textarea {
	font-family: inherit;
	font-size: inherit;
	width: 100%;
	width: calc(100% - 10px); /* (padding+border)*2 */
	border:  1px #ddd solid;
	padding: 4px;
	
	display: block;
	background-color: #f9f9f9;
}
textarea.elf-field-textarea:focus,
input.elf-field-text:focus {
	background-color: #f8ffef;
}

select {
	width: 100%;
	display: block;
	font-size: inherit;
}
select.elf-field-popupmenu {
	margin: 0;
	padding: 0;
	margin-top: 4px;
	margin-bottom: 4px;
	border: 1px #ccc solid;
	height: auto; /* Eliminare per bootstrap o mettere auto che interferisce meno */
}
select.elf-field-listbox {
}

/* Campo virtuale */
.elf-field-htmlcode {
	display: block;
	width: 100%;
}


.elf-checkbox-option-wrapper {
	margin: 2px;
	display: block;
}
.elf-checkbox-option-wrapper-inline {
	margin: 2px;
	display: inline-block;
}
label.elf-checkbox-option-label {
	padding: 0; /* Resetto lo stile delle label principali */
	margin:0; /* Resetto lo stile delle label principali */	
	font-weight: normal; /* Resetto lo stile delle label principali */	
	color: #333; /* Resetto lo stile delle label principali */	
	display: inline-block; /* Resetto lo stile delle label principali */	
	
	margin: 2px;
}
.elf-checkbox-option-wrapper.disabled label.elf-checkbox-option-label {
	color: #999;
}
input.elf-field-checkbox {
	margin: 2px;
	vertical-align: middle;
	display: inline; /* rispetto al check */
}



.elf-radio-option-wrapper {
	margin: 2px;
	display: block;
}
.elf-radio-option-wrapper-inline {
	margin: 2px;
	display: inline-block;
}
label.elf-radio-option-label {
	padding: 0; /* Resetto lo stile delle label principali */
	margin:0; /* Resetto lo stile delle label principali */	
	font-weight: normal; /* Resetto lo stile delle label principali */	
	color: #333; /* Resetto lo stile delle label principali */	
	display: inline-block; /* Resetto lo stile delle label principali */	

	margin: 2px;
}
.elf-radio-option-wrapper.disabled label.elf-radio-option-label {
	color: #999;
}
input.elf-field-radio {
	margin: 2px;
	vertical-align: middle;
	display: inline; /* rispetto al radio */
}


.elf-form-pagination {
	margin-top: 16px;
	float: right;
}
.elf-form-new {
	margin-top: 16px;
	float: left;
}


input.elf-field-file {
	margin: 2px;
}
.elf-file-preview {
	margin: 4px;
	position: relative;
	display: inline-block; /* la dimensione diventa quella minima=larghezza immagine maschera interna -> posso esprimere il posizionamento in % -> è tutto parametrizzato e si adatta alla mdimensione della maschera -> OK */
	width: 128px; /* necessario per IE 6*/
	height: 128px; /* necessario per IE 6*/	
}
.elf-file-preview img.image-mask {
	/* width: 100px; se non la imposto viene usata la dimensione del file -> OK */
}
.elf-file-preview img.image-value {
	position: absolute;
	width: 50%;
	height: 50%;
	top: 25%;
	left: 25%;
}

input.elf-field-image {
	margin: 2px;
}


/* Bottoni -> li gestisco unificati */
input.elf-field-submit,
input.elf-field-reset,
input.elf-field-button,
form button {
	font-family: caviardreams;
	background-color: #f6f6f6; /* Safari stilizza il bottone */
	height: auto;
	border: 1px #ccc solid;
	padding: 5px;
	padding-left: 6px;
	padding-right: 6px;	
	margin: 2px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 40px
}


/* Box info ed errori */
.elf-form-error {
	border: 1px red dashed;
	padding: 4px;
	margin: 0px;
	margin-top: 4px;
	margin-bottom: 8px;
	background-color: lightyellow;
}
.elf-form-error h4 {
	border: 0;
	margin: 0;
	padding: 0;
	padding-bottom: 4px;
	font-size: 12px;
	color: #f10915;
}
.elf-form-error p {
	border: 0;
	margin: 0;
	padding: 0;
	line-height: normal;
}

.elf-form-message {
	border: 1px #ccc dashed;
	padding: 8px;
	margin: 1px;
	margin-top: 0px;
	margin-bottom: 18px;
	background-color: lightyellow;
}
.elf-form-message h3 {
	border: 0;
	margin: 0;
	padding: 0;
	padding-bottom: 4px;
	font-size: 14px;
	color: #1f6d00;
}
.elf-form-message p {
	border: 0;
	margin: 0;
	padding: 0;
	color: #666;
	line-height: normal;
}



/* Render campi del form in modalità testo (report di anteprima invio) */
.elf-form-item.elf-form-item-text-mode {
	color:  #6D747B;
	border-bottom: 1px #ddd solid;
}
.elf-form-item.elf-form-item-text-mode label {
	padding-right: 4px;
}
.elf-form-item.elf-form-item div.elf-form-item-value-text-mode {
	color: #009EE0;
	padding-left: 1px;
	padding-bottom: 2px;
	font-family: "Courier New", Courier, mono;
	background-color: white;
}



.mask {
	background-color: #000;
	opacity: 0.8;
}
.spinner {
	position: absolute;
	opacity: 0.85;
	z-index: 999;
	background-color: #fff;
}
.spinner-msg {
	opacity: 1;
	text-align: center;
	font-weight: bold;
	font-family: arial;
	font-size: 14px;
	padding: 10px;
}
.spinner-img {
	background: url(../images/ajax-spinner_24x24.gif) no-repeat;
	width: 24px;
	height: 24px;
	margin: 0 auto;
}