/* Unibern
 * FORM.CSS
 * 
 * Author: Nicolas Cusan
 * Arillo - Design & Development
 * http://www.arillo.net
 */
/*
 * FORM STRUCTURE:
 * <form>
 * 	<fieldset>
 * 		<legend>Legend</legend>
 * 		<ol>
 * 			<li class="field text"> (allways use the class .field + the type of field e.g. .text, .email, .password)
 * 				<label for="TextField">label</label>	
 * 				<div class="middleColumn"> (can be whathever just make sure it has class to target it)
 * 					<input type="text" name="Text Field" class="text" id="TextField" /> (allways use the class of the submit type to be able to target it)
 * 				</div>	
 * 			</li> 
 * 		</ol>
 * 	</fieldset>
 * 	<div class="actions"> (wrap the actions in .actions class)
 * 		<button><button> <input type="submit">
 * 	</div>
 * </form>
 * 
 * 
 * */
/*************************
 FORMS RESET AND CROSSBROWSER NORMALISATION (as much as posible)
 **************************/
input,
button,
select,
textarea {
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  margin: 0;
  vertical-align: middle;
}
::-moz-focus-inner {
  border: 0;
}
/* em's are set to 11 as forms should be wraped in .forms class */
form{
	margin-bottom: 1.6363em;
}
	/* there are some ul's in the forms for optionset, checkboxsets & others */
	form ul{
		margin-bottom: 0;		
	}
	/* fieldsets and legends */
	form fieldset{
		padding: 0 1.8181em 1.0909em 1.8181em;
		background: #f2f2f2;
		margin-bottom: 1.6363em;
	}
		form fieldset legend{
			margin-left: -1.6666em;
			background: #f2f2f2;
			font-size: 1.0909em;
			font-weight: bold;
			padding: 0.5em 1.6666em;
			margin-bottom: 18px;
		}
		/*-- wbkit specific hack to make legends behave (if using user_agend.js this could be solved with a html.webkit form fieldset) --*/
		@media screen and (-webkit-min-device-pixel-ratio:0) {
			form fieldset{
				padding: 1.0909em 1.8181em 1.0909em 1.8181em;
			}
			form fieldset legend{
				padding: 0.8em 1.6666em;
			}
		}
		form fieldset fieldset{
			background: #fff;
		}
			form fieldset fieldset legend{
				background: #fff;
			}
		form fieldset ol{
			margin-bottom: 0;
		}
		/* make inputs span full in ie6 & ie7 */
/*		html.lt8 form fieldset ol{
			overflow: hidden;
			width: 100%;
		} */
			/* make everythig that should have pointer cursor:pointer */
			li.checkbox label,
			li.checkbox input,
			li.checkboxset label,
			li.checkboxset input,
			li.optionset label,
			li.optionset input,
			.actions input,
			.datumSubmit,
			button,
			select{ 
				cursor: pointer;
			} 
			/* setup li.fields */
			.field{
				margin-bottom: 0.7272em;
			}
				/* colors for errors and mandatory fields (javascript or inline coding needed for ie6 and below) */
				.error label{
					color: #c12c2c;
				}
				.mandatory label:after{
					content: "*";
					color: #c12c2c;
				}
				label.mandatory:after{
               content: "*";
               color: #c12c2c;
            }
				
				/*-- TEXT INPUTS, TEXTAREAS, SELECTS, CHECKBOXES RADIOBUTTONS --*/
				textarea,
				select,
				input.email,
				input.password,
				input.text{
					/*-- reset --*/
					-webkit-appearance: none;
					-moz-border-radius: 0;
					-webkit-border-radius: 0;
					border-radius: 0;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					/*-- colors --*/
					background-color: #fff;
					border: 1px solid;
					border-color: #848484 #c1c1c1 #e1e1e1;
					outline: 0;
					/*-- type --*/
					color: inherit;
					font-size: inherit;
					font-family: inherit;
					line-height: inherit;
					/*-- format --*/
					/* padding: 2px 3px;
					height: 25px;
					width: 100%; */
				}
				/*-- errors for text inputs, selects & texareas --*/
				.error textarea,
				.error select,
				.error input.email,
				.error input.password,
				.error input.text{
					background: #efa69d;
				}
				/*-- make them behave in ie6 & ie7 (as good as posible) --*/
				html.lt8 textarea,
				html.lt8 select,
				html.lt8 input.date,
				html.lt8 input.datetime,
				html.lt8 input.email,
				html.lt8 input.password,
				html.lt8 input.text{
					padding-top: 2px;
					padding-bottom: 1px;
					height: auto;
				}
				/*-- make them behave in ie6 further (as good as posible) --*/
				html.lt7 textarea,
				html.lt7 select,
				html.lt7 input.date,
				html.lt7 input.datetime,
				html.lt7 input.email,
				html.lt7 input.password,
				html.lt7 input.text{
					vertical-align: top;
				}
				/* make texinputs fit in ie6 & ie7 (Textarea bellow)*/
				html.lt8 li.email .middleColumn,
				html.lt8 li.password .middleColumn,
				html.lt8 li.text .middleColumn{
					padding-right: 8px;
				}
				
				/*-- Selects specific styles --*/
				select{
					-webkit-border-radius: 2px;
					-moz-border-radius: 2px;
					border-radius: 2px;
				}
				/*-- webkit specific hack to give selects an arrow (if using user_agend.js this could be solved with a html.webkit select) --*/
				@media screen and (-webkit-min-device-pixel-ratio:0) {
					select{
						background-image: url(../images/forms/select_arrow.gif);
						background-repeat: no-repeat;
						background-position: right center;
						padding-right: 20px;
					}
				}
				/*-- make selects behahave in ie6 --*/
				html.lt7 select {
					margin-top: 1px;
				}
				/*-- setup multiple selects --*/
				select[multiple]{
					height: auto;
					min-height: 2em;
					background-image: none;
					padding: 0;
				}
					optgroup {
						color: #666;
						font-style: normal;
						font-weight: bold;
					}
				/*-- setup textareas --*/
				/* textarea{
					height: auto;
				}
				textarea {
					min-height: 100px;
					overflow: auto;
					resize: vertical;
					width: 100%;
				} */
				/*-- make textareas fit in ie6 &ie7 --*/
				/* html.lt8 li.textarea .middleColumn{
					padding-right: 8px;
				} */
				/*-- setup checkboxes & checkboxsets & optionsets --*/
				/* li.checkbox input,
				li.checkboxset input,
				li.optionset input{
					margin-left: 0;
					margin-right: 3px;	
				} */
				li.checkbox input,
				li.checkboxset input{
					line-height: inherit;
					vertical-align: middle;	
				}
				li.checkboxset ul label,
				li.optionset ul label{
					color: #333;
				}
				li.checkboxset ul .error label,
				li.optionset ul .error label{
					color: #c12c2c;
					font-weight: bold;
				}
				/*-- disabled & readonly stuff --*/
				textarea[readonly],
				select[readonly],
				input.email[readonly],
				input.password[readonly],
				input.text[readonly],
				textarea[disabled],
				select[disabled],
				input.email[disabled],
				input.password[disabled],
				input.text[disabled]{
					background-color: #eee;
					color: #888;
					cursor: default;
				}
				/*-- disabled & readonly for ie6 (needs a class) --*/
				.disabled textarea,
				.disabled select,
				.disabled input.email,
				.disabled input.password,
				.disabled input.text,
				.readonly textarea,
				.readonly select,
				.readonly input.email,
				.readonly input.password,
				.readonly input.text{
					background-color: #eee;
					color: #888;
					cursor: default;
				}
				/*-- focus styles --*/
				textarea:focus,
				textarea:active,
				select:focus,
				select:active,
				input.email:focus,
				input.email:active,
				input.password:focus,
				input.password:active,
				input.text:focus,
				input.text:active{
					-moz-box-shadow: #999 0 0 5px;
					-webkit-box-shadow: #999 0 0 5px;
					box-shadow: #999 0 0 5px;
					z-index: 1;			
				}
		/*-- BUTTONS & SUBMIT INPUTS --*/
		.actionsTop{
			padding-bottom: 1.6363em;
		}
		.actions{
			overflow: hidden;
		}
		fieldset .actions{
			margin-bottom: 0.7272em; 
		}
			/*-- setup buttons and submits --*/
			.actions input,
			button{
				-webkit-appearance: none;
				-moz-border-radius: 4px;
				-webkit-border-radius: 4px;
				border-radius: 4px;
				background: #ddd url(../images/forms/button.png) repeat-x;
				background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ddd));
				background-image: -moz-linear-gradient(top center, #fff 0%, #ddd 100%);
				text-shadow: rgba(255,255,255,0.75) 0 1px 1px;
				border: 1px solid;
				border-color: #ccc #bbb #999;
				color: inherit;
				font-family: inherit;
				font-weight: bold;
				font-size: inherit;
				/*				
				line-height: 1.2;
				outline: 0;
				overflow: visible;
				padding: 4px 5px 5px;
				width: auto;
				float: left;
				margin-right: 3px;
				*/
			}
			
			.datumSubmit{
				-webkit-appearance: none;
				-moz-border-radius: 4px;
				-webkit-border-radius: 4px;
				border-radius: 4px;
				background: #ddd url(../images/forms/button.png) repeat-x;
				background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ddd));
				background-image: -moz-linear-gradient(top center, #fff 0%, #ddd 100%);
				text-shadow: rgba(255,255,255,0.75) 0 1px 1px;
				border: 1px solid;
				border-color: #ccc #bbb #999;
				color: inherit;
				font-family: inherit;
				font-weight: bold;
				font-size: inherit;
				line-height: 1.2;
				outline: 0;
				overflow: visible;
				padding: 4px 5px 5px;
				width: auto;
				margin-right: 3px;
			}
			
			.actions input:hover,
			button:hover, .datumSubmit:hover{
				border-color: #ccc #aaa #888;
				background: #999 url(../images/forms/button.png) repeat-x;
				background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(1, #aaa));
				background-image: -moz-linear-gradient(top center, #ddd 0%, #aaa 100%);			
				text-shadow: rgba(255,255,255,0.5) 0 1px 1px;
			}
			/*-- make them behave in ie6 & ie7 --*/
			html.lt8 .actions input,
			html.lt8 .actions input{
				padding: 3px 10px 1px;
			}
			html.lt8 button{
				padding-top: 1px;
				padding-bottom: 1px;
			}
			/*-- disabled stuff --*/
			button[disabled],
			.actions input[disabled]{
				color: #888;
				cursor: default;
			}
			/*-- focus styles --*/
			button:focus,
			button:active,
			.actions button:focus,
			.actions button:active,
			.actions input:focus,
			.actions input:active{
				-moz-box-shadow: #999 0 0 5px;
				-webkit-box-shadow: #999 0 0 5px;
				box-shadow: #999 0 0 5px;
				z-index: 1;
			}
/*************************
 HORIZONTAL FORMS (to use this ad .horizontal class to your fieldset)
 **************************/
.horizontal .field{
	overflow: hidden;
	border-bottom: 0.090em dashed #bbb;
	padding-bottom: 0.7272em; 
}
.lt8 .horizontal .field{
	width: 100%; 
}
	.horizontal .field label{
		display: block;
		width: 49%;
		margin-right: 1%;
		float: left;
	}
	.lt8 .horizontal .field label{
		width: 49%
	}
		/* reset labels for checkboxsets optionsets */
		.horizontal .field ul label{
			display: inline;
			width: auto;
			margin: 0;
			float: none;
		}
	.horizontal .field .middleColumn{
		width: 50%;
		float: left;
	}
	.lt8 .horizontal .field .middleColumn{
		width: 48%;
		overflow: hidden;
	}

   .horizontal .field .weekdays label{
      margin-right: 15px;
   }
   .horizontal .field input.search{
      display: block;
      width: 49%;
      margin-right: 1%;
      float: left;
   }
/*************************
 LEFT TO RIGHT APP
 **************************/
#LeftToRightApp ol{
	overflow: hidden;
}
	#LeftToRightApp ol li{
		float: left;
		/* clear fieldset.horizontal styles */
		padding: 0;
		border: 0;
	}
	#LeftToRightApp ol li#Right,
	#LeftToRightApp ol li#Left{
		width: 42%;
	}
	#LeftToRightApp ol li#Right{
		float: right;
	}
	#LeftToRightApp ol li#Center{
		width: 16%;
		padding-top: 1.6363em;
	}
		#LeftToRightApp ol li#Center button{
			display: block;
			margin: 0 auto 1em auto;
			float: none;
		}