@charset "utf-8";
/*
    Document   : form
    Created on : 2011.10.19., 9:22:03
    Author     : gt
    Description:
        Now default form design is separated and fully overridable.
*/

/* boxsizing.htc is for quirks-only browsers. Star is only seen by IE6/IE7. */
/*noinspection CssUnknownTarget*/
.form-row, .form-row *, .form-row *:before, .form-row *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(boxsizing.htc);
}

form h4, .form h4,
form h4 ~ .form-row, .form h4 ~ .form-row {
	margin-left: 5px;
}

.form-row {
	clear: left;
	margin-top: .25em;
	position: relative;
}
.form-row::first-line {
	line-height: 2em;
}

#jmodal .form-row {
	min-width: 500px;
}

.form-row:after {
	display: block;
	clear: both;
	content: " ";
	font-size: 1px;
	line-height: 0;
	margin: 0;
	padding: 0;
}

label, input, select, textarea, .field, .dd-container {
	font-size: inherit;
	vertical-align: middle;
	transition: all 0.25s linear 0s;
}

label, input, select {
	/* instead of padding... */
	line-height: 2em;
}
.button, input[type=button], input[type=submit], button {
	line-height: 1.8em;
}

/*.field > *:not(input) {
	line-height: 1.25;
}*/

select {
	min-height: 2em;
}

/* line-height doesn't work on selects... but min-height does not align text to middle in firefox... */
@-moz-document url-prefix() {
	select { padding-top: 0.3em; padding-bottom: 0.25em; }
}

/* ^_^ Safari, Chrome only */
/*noinspection CssInvalidMediaFeature*/
@media screen and (max-width: 768px) {
	label, input, select, textarea, .field, .dd-container {
		transition: none!important;
	}
}

input, select, textarea, button {
	border: 1px solid;
	color: inherit;
	padding-left: .25em;
	padding-right: .25em;
}

textarea {
	padding-top: .25em;
	padding-bottom: .25em;
}

input.monospace, select.monospace, textarea.monospace, button.monospace {
	font-family: monospace;
}

.form-row div.field {
	display: inline-block;
}

/* I think its obsolete
.field input, .field select, .field textarea, .field .field, .field .description, .field .dd-container,
.dd-container input, .dd-container select, .dd-container textarea, .dd-container .field, .dd-container .description, .dd-container .dd-container {
	margin-left: 0;
}
*/

ul.field > li:before, .field > ul > li:before {
	display: none;
}

input + .suffix, select + .suffix, textarea + .suffix, .field + .suffix {
	position: relative;
	top: 0;
	bottom: 0;
	margin-left: -20px;
	width: 0;
	background: inherit;
	text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white;
}

.body form {
	display: inline-block;
	vertical-align: top;
	width: 100%;
}

/* you should add "width" to this to setup form width! */
.body .form-row {
	padding-left: 200px;
}

#jmodal .body .form-row {
	padding-left: 150px;
}

.body .label-wide .form-row {
	padding-left: 250px!important;
}

.body .form-row:empty {
	padding: 0;
}

/* the rule above would overwrite that one in default.css. So we reproduce it. */
.body .form-row > .default-hidden:not(.field):not(.description):not(:empty):not(.block),
.body .form-row > .default-hide:not(.field):not(.description):not(:empty):not(.block) {
	display: none;
}

.body .form-row > input,
.body .form-row > select,
.body .form-row > textarea,
.body .form-row > .field,
.body .form-row td .field,
.body .form-row .field input,
.body .form-row .field select,
.body .form-row .field textarea,
.body .form-row .field .field,
.body .form-row .full-width input,
.body .form-row .full-width select,
.body .form-row .full-width textarea,
.body .form-row .full-width .field {
	width: 100%;
	position: relative;
}

.form-row dl dt, .form-row dl dd {
	padding: 0;
}

.form-row > label,
.form-row > * > label {
	display: inline;
}

.body .form-row > label,
.body .form-row > * > label {
/*	left: 0;
	top: 1px;
	bottom: 1px;
	position: absolute;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;*/
	float: left;
	clear: left;
	width: 195px;
}
body .form-inline .form-row > label,
body .form-inline .form-row > * > label,
body .form-inline.form-row > label,
body .form-inline.form-row > * > label {
	float: none;
	clear: none;
	width: auto;
}
.body .form-row > *:first-child:not(a) {
	margin-left: -200px;
}

#jmodal .body .form-row > label, #jmodal .body .form-row > * > label {
	width: 145px;
}
.body .label-wide .form-row > label, .body .label-wide .form-row > * > label {
	width: 245px!important;
}


#jmodal .body .form-row > *:first-child:not(a) {
	margin-left: -145px;
}
.body .label-wide .form-row > *:first-child:not(a) {
	margin-left: -250px!important;
}

.required {
	vertical-align: middle !important;
}

.required:after {
	font-family: "icons", cursive;
	color: red;
	content: "\f069";
	font-size: 50%;
	vertical-align: super;
	padding-left: 2px;
}

.form-row .button, .form-row input[type=button], .form-row input[type=submit], .form-row button {
	min-width: 50px;
}

.body .form-row > label + textarea.rte, .body .form-row .field textarea.rte {
	min-height: 150px;
}

.no-full-width {
	width: auto !important;
}

/* input follows another input */
.body .form-row input ~ input, .body .form-row input ~ select, .body .form-row input ~ textarea, .body .form-row input ~ .field,
.body .form-row select ~ input, .body .form-row select ~ select, .body .form-row select ~ textarea, .body .form-row select ~ .field,
.body .form-row textarea ~ input, .body .form-row textarea ~ select, .body .form-row textarea ~ textarea, .body .form-row textarea ~ .field,
.body .form-row .field ~ input, .body .form-row .field ~ select, .body .form-row .field ~ textarea, .body .form-row .field ~ .field,
.body .form-row input ~ * ~ input, .body .form-row input ~ * ~ select, .body .form-row input ~ * ~ textarea, .body .form-row input ~ * ~ .field,
.body .form-row select ~ * ~ input, .body .form-row select ~ * ~ select, .body .form-row select ~ * ~ textarea, .body .form-row select ~ * ~ .field,
.body .form-row textarea ~ * ~ input, .body .form-row textarea ~ * ~ select, .body .form-row textarea ~ * ~ textarea, .body .form-row textarea ~ * ~ .field,
.body .form-row .field ~ * ~ input, .body .form-row .field ~ * ~ select, .body .form-row .field ~ * ~ textarea, .body .form-row .field ~ * ~ .field,
.body .form-row input:not(:only-of-type), .body .form-row select:not(:only-of-type), .body .form-row textarea:not(:only-of-type)/*, .body .form-row .field:not(:only-of-type)*/ {
	width: auto;
}

/* right-aligned button, the first */
.form-row .button:nth-of-type(1),
.form-row input[type=button]:nth-of-type(1),
.form-row input[type=submit]:nth-of-type(1),
.button:nth-of-type(1),
.form-row > .button.right,
.form-row > input[type=button].right,
.form-row > input[type=submit].right {
/*	margin-top: 15px;
	margin-bottom: 5px;*/
	position: relative;
	float: right;
}
/* button after form fields floats right. we need make space for it */
.body .form-row > input[type=button] ~ input,
.body .form-row > input[type=button] ~ select,
.body .form-row > input[type=button] ~ textarea,
.body .form-row > input[type=submit] ~ input,
.body .form-row > input[type=submit] ~ select,
.body .form-row > input[type=submit] ~ textarea,
.body .form-row > input[type=button] ~ input,
.body .form-row > input[type=button] ~ * ~ select,
.body .form-row > input[type=button] ~ * ~ textarea,
.body .form-row > input[type=submit] ~ * ~ input,
.body .form-row > input[type=submit] ~ * ~ select,
.body .form-row > input[type=submit] ~ * ~ textarea {
	max-width: 80%;
}

.body .form-row > input[type=button],
.body .form-row > input[type=submit],
.body .form-row .field input[type=button],
.body .form-row .field input[type=submit] {
	width: auto!important;
	min-width: 5em;
	position: relative;
	left: 0;
}

/* left button in .form-row, the second */
.form-row .button.left,
.form-row input[type=button].left,
.form-row input[type=submit].left,
.form-row .button:nth-of-type(2),
.form-row input[type=button]:nth-of-type(2),
.form-row input[type=submit]:nth-of-type(2),
.form-row .button:nth-of-type(2),

.form-row input[type=button] ~ input[type=button],
.form-row input[type=button] ~ input[type=submit],
.form-row input[type=button] ~ .button,
.form-row input[type=submit] ~ input[type=button],
.form-row input[type=submit] ~ input[type=submit],
.form-row input[type=submit] ~ .button,

.form-row .button ~ input[type=button],
.form-row .button ~ input[type=submit],
.form-row .button ~ .button,
.form-row input[type=button] ~ * ~ input[type=button],
.form-row input[type=button] ~ * ~ input[type=submit],
.form-row input[type=button] ~ * ~ .button,
.form-row input[type=submit] ~ * ~ input[type=button],
.form-row input[type=submit] ~ * ~ input[type=submit],
.form-row input[type=submit] ~ * ~ .button,
.form-row .button ~ * ~ input[type=button],
.form-row .button ~ * ~ input[type=submit],
.form-row .button ~ * ~ .button {
	position: absolute;
	left: 0;
	float: none;
}

/* middle button in .form-row, the third */
.form-row .button:nth-of-type(3),
.form-row input[type=button]:nth-of-type(3),
.form-row input[type=submit]:nth-of-type(3),
.form-row .button:nth-of-type(3),
.form-row .button.middle,
.form-row input[type=button].middle,
.form-row input[type=submit].middle,
.form-row .button.middle {
	position: absolute;
	left: 45%;
	float: none;
}

.form-row .button:only-of-type,
.form-row input[type=button]:only-of-type,
.form-row input[type=submit]:only-of-type,
.form-row .button:only-of-type {
	position: relative!important;
}

/* left aligned buttons after form element */
.form-row input[type=text] ~ .button,
.form-row input[type=password] ~ .button,
.form-row select ~ .button,
.form-row textarea ~ .button,
.form-row input[type=text] ~ input[type=button],
.form-row input[type=password] ~ input[type=button],
.form-row select ~ input[type=button],
.form-row textarea ~ input[type=button],
.form-row input[type=text] ~ input[type=submit],
.form-row input[type=password] ~ input[type=submit],
.form-row select ~ input[type=submit],
.form-row textarea ~ input[type=submit] {
	max-height: 100%;
	float: none;
	margin-bottom: 0;
	margin-top: 0;
	margin-left: 0;
	vertical-align: inherit;
	position: relative;
	left: 0;
}


.description {
	text-align: justify;
	opacity: .6;
	font-size: 90%;
	line-height: 1.25;
	padding-top: 4px;
}

/* form status and errors */

.body .form-row .field.error,
.body .form-row input.error,
.body .form-row select.error,
.body .form-row textarea.error {
	width: 60%;
}
.body .form-row .field .field.error,
.body .form-row .field input.error,
.body .form-row .field select.error,
.body .form-row .field textarea.error,
.body .form-row input[type=checkbox].error,
.body .form-row input[type=radio].error {
	width: 100%;
}

.form-row input[type=checkbox], .form-row input[type=radio] {
	width: auto !important;
	border: none !important;
	display: inline-block;
	vertical-align: middle;
	margin: 0.25em 0.2em;
}

.form-row input[type=checkbox] + *:not(input),
.form-row input[type=radio] + *:not(input),
.form-row input[type=checkbox] + *:not(select),
.form-row input[type=radio] + *:not(select) {
	display: inline-block;
	vertical-align: middle;
}

.form-row input[type=file] {
	width: auto;
	border: none;
	display: inline-block;
	vertical-align: middle;
}

.error-msg {
	color: red;
}

form .error.full-width {
	width: 75%;
}

/* @TODO: merge this for arrow-head on the error box
.minimal #taskbar .tooltip {
    background: -moz-linear-gradient(center top , #444444 0%, #333333 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #777777;
    box-shadow: 0 1px 5px 0 #333333;
    color: #EEEEEE;
    display: inline-block;
    font-weight: bold;
    padding: 2px 8px 3px;
    position: absolute;
    right: 2px;
    text-shadow: 0 1px 1px #000000;
    top: -500px;
    white-space: nowrap;
    z-index: 200;
}
.minimal #taskbar .tooltip:after {
    border-color: #888888 rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 0 4px 4px;
    content: "";
    display: block;
    position: absolute;
    right: 15px;
    top: -4px;
    width: 0;
    z-index: 251;
}
.ie8 .minimal #taskbar .tooltip:after {
    top: -6px;
}
.minimal #taskbar a:hover .tooltip {
    display: block;
    top: 39px;
}
*/

.body .form-row .error-msg {
	display: inline-block;
	vertical-align: middle;
	color: inherit;
	max-width: 40%;
	min-height: 20px;
	position: relative;
	box-shadow: 0px 0px 4px 3px #666666;
	border-radius: 3px;
	z-index: 10;
	line-height: 1;
	left: -5px;
	float: right;
}

.body .form-row .error-msg span {
	color: #333;
	padding: 2px 8px;
	display: block;
	text-align: center;
}

.body .form-row .error-msg, .body .form-row .error-msg span, .body .form-row .error-msg .arrow:after {
	background-color: #EFA4A4;
}
.body .form-row .error-msg .arrow {
	overflow: hidden;
	position: absolute;
	left: -10px;
	width: 10px;
	top: 1px;
	bottom: 0;
}

.body .form-row .error-msg .arrow:after {
	box-shadow: 0px 0px 4px 3px #666666;
	height: 18px;
	width: 18px;
	left: 9px;
	top: 50%;
	margin-top: -10px;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	tranform: rotate(45deg);
}


.form-row input.error, .form-row .error input, .form-row .error select, .form-row select.error, .form-row .error textarea, .form-row textarea.error {
	color: red !important;
	border-color: red !important;
}
/*
.body .form-row > input.error, .body .form-row .error input,
.body .form-row .error select, .body .form-row select.error,
.body .form-row .error textarea, .body .form-row textarea.error {
	width: auto;
}
*/

.form-row .field-list, .form-row .field-box {
	display: inline-block;
	padding-bottom: 5px;
	/*padding-left: 5px;*/
}

.form-row input.success, .form-row select.success, .form-row textarea.success,
.form input.success, .form select.success, .form textarea.success,
.form-row .success input, .form-row .success select, .form-row .success textarea {
	color: green !important;
	border-color: green !important;
}

.form-row ul.field li {
	list-style: none;
}

.form-row.full-width {
	padding: 0 5px;
}

.form-row.full-width label {
	display: block;
	position: static;
	padding: 0;
}

.field-trigger {
	display: inline-block;
	position: relative;
	width: 0;
	line-height: 0!important;
	vertical-align: middle;
	cursor: pointer;
	right: 1.25em;
	z-index: 2;
}

.field-trigger:before {
	position: absolute;
	right: -0.5em;
	width: 1em;
	font-family: "icons";
	font-size: 1.4em;
	/*background: url("../img/load16.gif") no-repeat scroll center center rgba(0, 0, 0, 0);*/
}

.button-trigger {
	background-image: url("../img/animated-overlay.gif");
	opacity: .15;
	position: absolute;
}

.date-pick {
	padding-right: 25px;
}
