/**
 * FORM.CSS v1.0
 *
 * CSS стили для форм, генерируемых yii.
 * Базируется на файле, входящем в поставку yii.
 *
 * Структура формы должна быть следующей:
 *
 * <div class="form">
 *     <fieldset>
 *         <legend>fieldset name</legend>
 *         <div class="row">
 *             <label for="inputid">xyz <span class="required">*</span></label>
 *             <input name="inputid" id="inputid" type="text" />
 *             <div class="hint">hint text</div>
 *             <div class="errorMessage">error text</div>
 *         </div>
 *         <div class="row">
 *             <label for="inputid">xyz</label>
 *             <input name="inputid" id="inputid" type="text" />
 *             <div class="hint">hint text</div>
 *             <div class="errorMessage">error text</div>
 *         </div>
 *     </fieldset>
 *     <div class="row buttons">
 *         <label for="inputid">xyz</label>
 *         <input name="inputid" id="inputid" type="text" />
 *         <div class="hint">hint text</div>
 *     </div>
 * </div>
 * 
 * При работе валидатора к блоку row добавляются классы error при ошибке валидации
 * и success при корректном заполнении поля:
 *
 * <div class="row error">
 *     ...
 * </div>
 * <div class="row success">
 *     ...
 * </div>
 *
 * Блоку сообщения об ошибке движком автоматически добавляется стиль display:none; 
 * при отсутствии ошибок. При наличии ошибок, движок убирает этот стиль.
 *
 * <div class="errorMessage" style="display:none;">error text</div>
 *
 * При наличии ошибок валидации после нажатия на кнопку отправки данных, движок
 * добавляет в указанное в шаблоне место блок со списком ошибок:
 *
 * <div class="errorSummary">
 *     <p>Необходимо исправить следующие ошибки:</p>
 *     <ul>
 *         <li>Необходимо заполнить поле «Название».</li>
 *         ...
 *         <li>Необходимо заполнить поле «Вид».</li>
 *     </ul>
 * </div>
 *
 * Мы предполагаем что .errorSummary помещается внутри div.form.
 */

div.form {
/*  Справа ставим отступ чуть больше двух внутренних отступов в полях ввода для
	браузеров, которые не понимают calc, и точный отступ с учетом ширины бордера 
	для тех, которые понимают.
	Поля ввода при этом визуально будут масштабироваться по ширине в весь блок. */   
	padding-right: 1.1em;
	padding-right: calc(1em + 2px);
}

div.form fieldset {
/*  Мы никак не оформляем наборы полей, просто используем legend как подзаголвок. */
  	margin: 0;
  	border: none;
  	padding: 1em 0;
}

div.form fieldset legend
{
	color: #666;
  	font-size: 1.5em;
  	font-weight: normal;
  	font-family: inherit;
  	line-height: 120%;
  	margin-left: .2em;
}

.btn,
.btn-submit,
div.form input,
div.form textarea,
div.form select {
/* 	Поле будет вылезать за пределы блока form, но из-за отступа справа в самом блоке
	визуально будет выглядеть что поле ввода масштабируется по ширине блока формы. */
	color: inherit;
    padding: .5em;
    width: 100%;
    margin: 0;
	font-size: 1em;
    line-height: inherit;
    font-family: inherit;
    border-radius: .4em;
    -moz-border-radius: .4em;
    -webkit-border-radius: .4em;
    border: 1px solid #ccc;
    vertical-align: middle;
/*  Убираем браузерное оформление элементов ввода. */
    -moz-appearance: none;
    -webkit-appearance: none;
}

div.form input:focus,
div.form textarea:focus,
div.form select:focus 
{
	outline: none;
	background-color: #fec;
}

div.form input:disabled,
div.form textarea:disabled,
div.form select:disabled 
{
	background-color: #eee;
}

div.form textarea {
	height: 5em;
}

div.form select {
/*	Для селекта необходимо принудительно установить размеры. */
	height: 2.5em;
	width: calc(100% + 1em + 2px);
	background: url(/i/dropdown.png) right .5em center no-repeat;
    background-size: 9px;
}

div.form input[type="file"] 
{
    border: none;
    padding: 0;
    width: 100%;
}

.btn,
div.form input[type="button"] 
{
	cursor: pointer;
    width: auto;
    padding: .5em 1em;
    color: #666!important;
    background-color: #ccc;
    border-color: #ccc;
    display: inline-block;
    text-decoration: none!important;
    margin-right: .5em;
    margin-bottom: .5em;
    text-align: center;
}

.btn-submit,
div.form input[type="submit"] 
{
	cursor: pointer;
    width: auto;
    padding: .5em 1em;
    color: #fff!important;
    background-color: #06c;
    border-color: #06c;
    display: inline-block;
    text-decoration: none!important;
    margin-right: .5em;
    margin-bottom: .5em;
    text-align: center;
}

div.form input[type="radio"] 
{
    width: auto;
    margin: .5em;
    -moz-appearance: radio;
    -webkit-appearance: radio;
}

div.form input[type="checkbox"] 
{
    width: auto;
    margin: .5em;
    -moz-appearance: checkbox;
    -webkit-appearance: checkbox;
}

div.form label 
{
	color: inherit;
	font-weight: normal;
	font-size: 1em;
	display: block;
	padding: 0 .5em;
	border-right: 1px solid transparent;
  	border-left: 1px solid transparent;
    line-height: inherit;
    font-family: inherit;
}

div.form .row 
{
	margin-bottom: 1em;
}

div.form .row:last-child
{
	margin-bottom: 0;
}

div.form .hint 
{
	margin: 0;
	padding: 0 .5em;
	color: #999;
	border-right: 1px solid transparent;
	border-left: 1px solid transparent;
}

div.form span.required 
{
	color: #c00;
}

div.form div.error label
{
	color: #C00;
}

div.form div.error input,
div.form div.error textarea,
div.form div.error select,
div.form div.error .radio-list,
div.form div.error .checkbox-list
{
	color: #C00;
	background-color: #FEE;
	border-color: #C00;
}

div.form div.error select {
	background-image: url(/i/dropdownerror.png);
}

div.form div.success label
{
	color: #090;
}

div.form div.success input,
div.form div.success textarea,
div.form div.success select,
div.form div.success .radio-list,
div.form div.success .checkbox-list
{
	color: #090;
	background-color: #E6EFC2;
	border-color: #090;
}

div.form div.success select {
	background-image: url(/i/dropdownsuccess.png);
}

div.form .errorMessage
{
	color: #c00;
	padding: 0 .5em;
	border-right: 1px solid transparent;
	border-left: 1px solid transparent;
}

div.form .errorSummary
{
	width: 100%;
	color: #c00;
	border: 1px solid #c00;
	padding: 1em 1em 1em 0;
	margin-bottom: 2em;
	background: #FEE;
    border-radius: .4em;
    -moz-border-radius: .4em;
    -webkit-border-radius: .4em;
}

div.form .errorSummary p
{
	margin: 0;
	padding: 0 1em .5em 1em;
}

div.form .errorSummary ul
{
	margin: 0;
	padding: 0 1em 0 2.5em;
}

/* 
 * Captcha идет отельным модулем в yii.
 * Картинка и ссылка на ее обновление вставляется виджетом капчи.
 * Мы используем следующую разметку:
 *
 * <div class="row">
 *     <label class="captcha">xyz</label>
 *     <div class="captcha">
 *         <img>
 *         <a>show another picture</a>
 *     </div>
 *     <input type="text">
 *     <div class="hint">hint text</div>
 * </div> 
 */

div.form .captcha img 
{
    display: inline-block;
    vertical-align: middle;
}

div.form .captcha a 
{
    display: inline-block;
    vertical-align: middle;
	margin-left: .5em;
}

/*
 * Поле input[type=file] помещаем в блок .file
 * Так как в разных браузерах это поле оформлено по-разному, стараемся
 * привести его к общему знаменателю за счет рамки вокруг.
 */

div.form .file
{
    padding: .5em;
    border-radius: .4em;
    -moz-border-radius: .4em;
    -webkit-border-radius: .4em;
    border: 1px solid #ccc;
    display: block;
    width: 100%;
    margin: 0;
}

/* 
 * Checkbox list
 * 
 * <div class="row">
 *     <label>label for list</label>
 *     <ul class="checkbox-list">
 *         <li class="checkbox-item">
 *             <input type="checkbox">
 *             <label>label for checkbox</label>
 *         </li>
 *         <li class="checkbox-item">
 *             <input type="checkbox">
 *             <label>label for checkbox</label>
 *         </li>
 *     </ul>
 * </div>
 */

div.form .radio-list,
div.form .checkbox-list
{
	width: 100%;
	margin: 0;
    padding: .5em;
    border-radius: .4em;
    -moz-border-radius: .4em;
    -webkit-border-radius: .4em;
    border: 1px solid #ccc;
}

div.form .radio-item,
div.form .checkbox-item
{
	margin: 0;
	padding: 0;
	padding-left: 1.3em;
	position: relative;
	display: block;
}

div.form .radio-item:after,
div.form .checkbox-item:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

div.form .radio-item input[type="radio"],
div.form .checkbox-item input[type="checkbox"]
{
	position: absolute;
	margin: 0;
	top: .2em;
	left: 0;
	width: auto;
}

div.form .radio-item label,
div.form .checkbox-item label
{
	width: auto!important;
	text-align: left!important;
	padding: 0!important;
	white-space: normal!important;
	display: inline!important;
    border: 0;
}

/* 
 * Низ формы с кнопками обычно с дополнительным отступом или границей сверху 
 * <div class="row buttons">...</div>
 */

div.form div.buttons
{
	margin-top: 2em;
}

/*
 * Выше форма предполагает, что все элементы расположены друг за другом как
 * отдельные блоки по одному в строке. При широкой странице удобнее чтобы 
 * label был сбоку от input-а. Для этих целей вводим дополнительный класс wide:
 *
 * <div class="wide form">
 *     ......
 * </div>
 * 
 * Ширину полей ввода и меток вводим примерно т.к. при расположении их в строку
 * пробелы и переводы строк между ними не позволят состыковать блоки без зазоров.
 *
 * ВНИМАНИЕ: Работа не закончена! Не проверялись checkbox и radiobutton!
 */

div.wide.form
{
	padding: 0;
}

div.wide.form .row:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

div.wide.form label
{
	width: 30%;
	text-align: right;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	padding: .5em 0;
	display: block;
	float: left;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.wide.form label:after 
{	/* Прозрачная звездочка-индикатор обязательного поля. 
	   У действительно обязательных полей поверх нее будет наложен span.required. */
    content: " *";
    color: transparent;
}

div.wide.form span.required 
{
	position: absolute;
    right: 0;
}

div.wide.form input,
div.wide.form textarea,
div.wide.form select,
div.wide.form div.file,
div.wide.form div.captcha,
div.wide.form .radio-list,
div.wide.form .checkbox-list
{
	display: block;
    width: 60%;
    float: right;
}

div.wide.form select,
div.wide.form div.captcha
{
	width: calc(60% + 1em + 2px);
}

div.wide.form .btn,
div.wide.form .btn-submit,
div.wide.form input[type="button"],
div.wide.form input[type="submit"] 
{
	width: auto;
	display: inline-block;
	float: right;
	margin-left: .5em;
	margin-right: 0;
}

div.wide.form input[type="file"] 
{
	float: none;
	width: 100%;
}

div.wide.form .hint,
div.wide.form .errorMessage
{
	float: right;
	text-align: right;
	width: 60%;
}

div.wide.form .errorSummary 
{
	width: auto;
}

/*
 * Выравниваем метку капчи по вертикали.
 * Встроенная картинка капчи имеет высоту 50 пикселов.
 */

div.wide.form label.captcha {
	padding: 0;
	height: 50px;
	line-height: 50px;
	border: none;
}

/*
 * Для адаптивной верстки ставим ширину переключения отображения с
 * широкой формы к узкой.
 *
 * ВНИМАНИЕ: Работа не закончена! Не проверялись checkbox и radiobutton!
 * Надо взять все параметры из .wide.form и привести их обратно к .form
 */

@media screen and (max-width: 500px) {
	div.wide.form {
		padding-right: 1.1em;
		padding-right: calc(1em + 2px);
	}

	div.wide.form label,
	div.wide.form label.captcha {
		float: none;
		width: auto;
		margin: 0;
		text-align: left;
		display: block;
		padding: 0 .5em;
		border-top: none;
		border-bottom: none;
		line-height: inherit;
		height: auto;
	}

	div.wide.form label:after {
	    display: none;
	}

	div.wide.form span.required {
		position: relative;
	}

	div.wide.form input,
	div.wide.form textarea,
	div.wide.form select,
	div.wide.form div.file,
	div.wide.form div.captcha,
	div.wide.form .radio-list,
	div.wide.form .checkbox-list {
		display: block;
	    width: 100%;
	    float: none;
	}

	div.wide.form .btn,
	div.wide.form .btn-submit,
	div.wide.form input[type="button"],
	div.wide.form input[type="submit"] {
		width: auto;
		display: inline-block;
		float: none;
		margin-left: 0;
		margin-right: .5em;
	}

	div.wide.form select {
		width: calc(100% + 1em + 2px);
	}

	div.wide.form .hint,
	div.wide.form .errorMessage {
		float: none;
		text-align: left;
		width: auto;
	}

	div.wide.form .errorSummary {
		width: 100%;
	}
}