// MaxSite CMS 
// Copyright http://max-3000.com/
// readme-forms.txt


.fform {
	p {
	
		@first: 90px; // размер первой ячейки или отступ (+5 на padding) .ffirst 
		@first1: 150px; // еще один размер первой ячейки или отступ (+5 на padding) .ffirst1
		@first2: 250px; // еще один размер первой ячейки или отступ (+5 на padding) .ffirst2
		@width_submit: 100px; // размер ячейки для кнопки submit (-5px для кнопки на отступ)
		@width_button: 50px; // размер ячейки для остальных кнопок (кнопка этой же ширины)
		
		display: table;
		width: 100%;
		padding: 3px 0;
		margin: 0;
		
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	
		span, label {
			display: table-cell;
			vertical-align: middle;
			
			input[type="text"], 
			input[type="email"], 
			input[type="password"], 
			input[type="url"], 
			input[type="search"], 
			input[type="number"], 
			textarea,
			select
			{
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				width: 100%;
			}
			
			input[type="radio"], 
			input[type="checkbox"] 
			{
				margin-right: 5px;
			}
			
			&.ftitle {
				text-align: right;
				padding-right: 5px;
			}
			
			&.ffirst {
				width: @first; // ширина первой ячейки
			} 
			
			&.ffirst1 {
				width: @first1; // ширина первой ячейки
			}
			
			&.ffirst2 {
				width: @first2; // ширина первой ячейки
			} 
			
			&.ffirst.ftitle {
				width: @first - 5px; // корректировка для двойного класса ffirst.ftitle
			} 
			
			&.ffirst1.ftitle {
				width: @first1 - 5px; // корректировка для двойного класса ffirst1.ftitle
			} 
			
			&.ffirst2.ftitle {
				width: @first2 - 5px; // корректировка для двойного класса ffirst2.ftitle
			} 
			
			&.fbutton { // ячейка для кнопки
				width: @width_button;
			
				button, input {
					min-width: @width_button;
				}
			}
			
			&.fsubmit {// ячейка для кнопки submit
				text-align: right;
				width: @width_submit;
				
				button, input {
					width: @width_submit - 5px;
				}
			} 
			
			&.ftop {
				vertical-align: top;
				padding-top: 3px; // чуть отступ сверху для красоты
			}
			
			&.fcenter {
				text-align: center;
			}
			
			// пустая ячейка
			&.fempty {
				width: 5px;
			} 
			
			// текстовая подсказка
			&.fhint {
				font-size: .9em; 
				font-style: italic; 
				color: #606060; 
				padding-top: 0; 
				padding-bottom: 5px;
			}

			// текстовая подсказка-заголовок
			&.fheader {
				font-weight: bold;
			} 
			
			// отмена ячейки - обычный span и label
			&.nocell {
				display: inline;
				width: auto;
				padding: 0;
			}
		}
		
		
		// обрамляющий label-блок для ячеек из span
		// <p><label class="fwrap"><span> titul </span><span> input </span></label></p>
		label.fwrap {
				display: table;
				width: 100%;
			}
		
		// если нужен нулевой отступ padding
		&.nop {
			padding-top: 0;
		} 
		
		// визуальный отступ для строки - для отбивки ряда кнопок
		&.hr {
			margin-top: 10px;
		}
		
		// визуальное выделение фоном шапки
		&.head {
			background-color: #eee;
			padding: 3px 7px;
		}
		
		// Заголовок, например перед названием поля
		&.header {
			font-weight: bold;
			margin: 15px 0 5px 0;
		}
		
		&.fhint {
			font-size: .9em; 
			font-style: italic; 
			color: #606060; 
			padding-top: 0; 
			padding-bottom: 5px;
			margin-top: 0;
		}
			
	}
}
