@import "../../config/theme.scss";



form {
	margin:0px;
	padding:0px;

	&.fForm {
		padding:7px;
		background-color:$colorNeutral01;
	}

	.databaseRelation {
		margin-top:5px;
		padding-top:5px;

		&.isPreferred1 div.formtrigger span.label {
			padding-left:20px;
			background:url(../img/icons.png) no-repeat 0 -1790px;
		}
		&.isPreferred0 div.formtrigger span.label {
			padding-left:20px;
			background:url(../img/icons.png) no-repeat 0 -1825px;
		}
	}

	div.typeDatabaseRelation div.formtrigger span.label.expanded {
		font-weight:bold;
	}

	&.formGeneral,
	&.formPerson,
	&.formRecord,
	&.formRightseditor,
	&.formConfig {
		padding-top:10px;
	}
	/* -------------------------------------------
		End: Special styles for involved persons
	---------------------------------------------- */
}

* html form {
	height:1%;
}

	fieldset {
		position:relative;
		display:block;
		margin:0 0 7px 0;
		padding:40px 15px 15px 15px;
		border:none;
		background-color:$white;

		fieldset,
		&.buttons {
			margin:0px;
			padding:0px;
			border:none;
			background:none;
		}

	}

	fieldset fieldset {
		width:100%;
		margin-top:10px; 
	}

	* html fieldset {
		height:1%;	/* IE6 */ 
	}



/* ------------------------
	Buttons, Footer line
   ------------------------*/
	fieldset.buttons {
		margin:0px;
		padding:0px;
		text-align:right;

		.fElement {
			margin-left:5px; 
		}
	}

	.fForm fieldset#config-fieldset-save {
		padding:10px 0; }

	legend,
	.fForm fieldset fieldset legend,
	.fForm .buttons legend,
	.fForm legend#config-fieldset-save-legend {
		display:none;
	}

	.fForm legend {
		position:absolute;
		margin: -40px 0 0 -15px;
		display:block;
		width:100%;
		padding:7px 0;
		text: {
			indent:15px;
			transform:uppercase;
		}
		font-weight:bold;
		border-bottom:1px solid $colorNeutral01;

		& a.ajaxloader {
			padding-left:32px;
			padding-bottom:20px;
			background:url(../img/ajax-loader.gif) no-repeat 7px 0px;
		}
	}

textarea,
select,
input {
	position:relative;
	width:100%;
	border:1px solid $colorTextGeneral;
	padding:1px;
	/* hack to fix form elements width */
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}

select {
	background-color: transparent;
}

input.checkbox,
input.radio,
input.button {
	border:none;
	width:auto;
}

input.datetime {
	float:left;
	width:95px;
	margin-right:5px;
}

input.textAC {
	background: {
		image:url(../img/icons.png);
		repeat:no-repeat;
		position:6px -808px;
		color:$colorCorporate02;
	}
	padding-left:25px;
}


textarea {
	font-size:1.0em;
}

.scrollbarHide select {
	min-width:107%;
	width:100% !important;
	width:107%;
}

select {
	text-transform:none;

	&.auto {
		width:auto;
	}

	&.day,
	&.month {
		width:40px;
		margin-right:2px;
	}

	&.monthnames {
		margin-left:2px;
	}

	&.year {
		width:60px;
	}

	&.datetime {
		width:150px;
	}

	option {
		text-transform:none;
		padding-left:5px;
	}

	optgroup {
		padding-top:10px;
		font-size:11px;

		option {
			background:$white;
		}
	}
}

	select option.error,
	selectgrouped option.error {
		color:$colorAlert02;
	}

[disabled] {
	background-color:$colorNeutral02;
	color:$colorNeutral08;
}



/* ----------------------
	HTML building
   ----------------------*/
div.fElement {
	position:relative;
	height:auto !important;
	height:1%;
	margin:0px;
	padding:3px 0;

	.fLabel {
		position:relative;
		float:left;
		width:140px;
		padding:2px 0;
		text-align:left;
	}

	.fField {
		/* input */
		float:left;
		width:320px;
		margin-left:5px;

		.fLabel {
			width:100px;
		}

		.fField {
			width:215px;
		}
	}

	.fClear {
		clear:both;
	}


	&.typeRTE  {
		.fField {
			width: 455px;
		}
	}
}

.fField {
	span.commenttext {
		a,
		a:link {
			text-decoration:underline;
		}
	}
}



/* -------------
	Types
   ------------- */
	div.typeDate .fField input {
		float:left;
		width:70px;
		margin-right:5px;
	}

	div.typeDatetime .fField input {
		float:left;
		width:90px;
		margin-right:5px;
	}

	div.typeTime .fField input,
	div.typeDuration .fField input {
		float:left;
		width:33px;
	}

	/* Checkbox in a fField element. */
	/* Example:Address in Ext Contact */
	.typeCheckbox {
		.fField {
			position:relative;
			top:3px;
			
			input.checkbox {
				width:auto;
			}
		}
		.fLabel {
			label {
				cursor: pointer;
			}
		}
	}

	.typeDatabaseRelation {
		.foreignRecordsActionControl {
			display:block;
		}

		button.addForeignRecord .icon {
			background:url(../img/icons.png) no-repeat 6px -567px;
			width:23px;
		}

		.databaseRelation {
			position:relative;
			border-top:1px solid $colorNeutral03;

			.formtrigger {
				cursor:pointer;
			}

			span {
				&.additionalStuff {
					position:absolute;
					top:4px;
					right:0px;

					a.remove {
						background:url(../img/icons.png) no-repeat 0 -539px;
					}
				}
			}
		}
	}

	button.updateDatabase .icon {
		width:24px;
		background:url(../img/icons.png) no-repeat 4px -928px;
	}

	.fElement .fField.hasWizard {
		input {
			width:90%;
			float:left;
		}

		.wizardIcon {
			cursor:pointer;
		}
	}

	fieldset.buttons div,
	fieldset.buttons div.fElement .fField {
		float:left;
		width:auto;
	}
	fieldset.buttons div.fElement .fLabel {
		display:none;
		width:auto;
	}



/* -----------------
	Design
   -----------------*/
input, textarea, select {
	border-color:$colorNeutral06 $colorNeutral01 $colorNeutral01 $colorNeutral06;
}

fieldset.buttons div.fElement {
	float:right;
}

	/* --- right floating Input --- */
.formElement .formField {
	width:58%;
	display:inline;
	float:right;
}



/* ----------------------------------------------
	Additional information after input field
   ---------------------------------------------- */
form .textAfterField {
	background-color:$white;
	border-radius:5px;
	box-shadow:2px 2px 7px $colorNeutral06;
	color:$colorNeutral07;
	display:none;
	margin:1px 2px 0 0;
	padding:10px;
	position:absolute;
	text-align:left;
	z-index:9999; /* always in front */
}

form .fField:hover .textAfterField {
	display:block;
}

.dateElement input {
	width:73px !important;
	width:77px;
	margin-right:10px;
	float:left;
}

form .fElement.error {

	& .fLabel.error label,
	& div.errorMessage {
		color:$colorAlert00;
		font-style:italic;
	}
}


form .fElement.warning {

	& .fLabel.warning label {
		color: $colorNotice02;
		font-style: italic;
	}
}



/* -------------------------
	Auto-completer list
   ------------------------- */
.acResultContainer {
	z-index:100;
	border-top:1px solid $colorNeutral03;
	box-shadow:2px 2px 5px $colorNeutral06;

	ul {
		padding:0 !important;
	}

	li{
		background:$white;
		border:1px solid $colorNeutral03;
		border-top:none;
		padding:5px;
		cursor:pointer;
		text-align:left;

		&.selected {
			background:$colorCorporate01;
		}
	}

	.empty{
		background:none;
		border:none;
		border-width:0px;
		padding:0px;
	}
}

.fField .acResultContainer ul {
	list-style:none;
}

/* --------------------
	Wizard icon
   -------------------- */
.fField {
	span.wizardIcon {
		height:16px;
		width:16px;
		display:block;
		float:right;
		background:transparent url(../img/icons.png) no-repeat 0 -90px;
	}
	.iconSelector {
		width:auto;

		.selectorIcon {
			display:block;
			height:25px;
			width:25px;
			margin:9px 0 0 9px;
			text-indent: -9999px;
		}

		li {
			float:left;
			cursor:pointer;
			background-color:$colorNeutral01;
			border:1px dotted $colorNeutral06;

			&.selected {
				border:1px solid $colorNeutral06;
				background-color:$colorCorporate02;
			}

			&:hover {
				background-color:$colorLinkHover;
			}
		}
	}
}



/* ----------------------------------
	Quick creation light-box
   ---------------------------------- */
#quickcreate,
#quicktask {
	text-align:left;
}



/* ---------------------------------------
	Error info: invalid items listing
   --------------------------------------- */
div.errorMessage ul.invalidItems {
	font-style:normal;
	border-left:5px solid $colorAlert00;
	padding-left:5px;
	list-style:square inside;

	li {
		font-weight:bold;

		ul {
			list-style-type:square;

			li {
				font-weight:normal;
				margin-left:20px;
			}
		}
	}
}

/* ---------------------------------------
	Dialog behaviour (content smaller)
   --------------------------------------- */

.dialog {
	.fElement {
		&.typeRTE  {
			.fField {
				width: 400px;
			}
		}
	}
}