/*
==============================================================================
**
** FORMS
**
** SCOPE: 		GLOBAL
** REVISION:	0.1
** DATE:		03/23/11
** AUTHORS:		DUNCAN MCALESTER (DUNCAN@LAYER-51.COM)

** USAGE:

** NOTES:		This is the baseline font styles, specific forms elements
				and form over rides should be created in the styles/forms-overrides.less
				file. This file should only be updated to incorporate global form
				changes


** TODO:

** REVISION HISTORY
------------------------------------------------------------------------------






==============================================================================
*/

textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"], .ie8 input[type="checkbox"], .ie9 input[type="checkbox"] { vertical-align: baseline; height: auto; width: auto; }
.ie7 input[type="radio"], .ie8 input[type="radio"], .ie9 input[type="radio"] {height: auto; width: auto;}
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border: 1px solid red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }



form {
	font-size: 				1em;
	line-height:			1;}

	form label {
		font-weight: 		bold;
		display: 			block;  }



form li {
	margin-bottom: 			2em; }


form .col li {
	margin-left: 			2%;
	width: 					100%;
	float: 					left; }

form .col li:first-child {
	margin-left: 			0; }


form .two li 	{ width: 	49%; 	}
form .three li 	{ width: 	32%; 	}
form .four li 	{ width: 	23.5%; }
form .five li 	{ width: 	18.4%; }
form .six li 	{ width: 	15%;	}




fieldset {
	padding:				1em;
	background: 			#f0f0f0;
	margin-bottom: 			2em;
	border: 				none;
	overflow: 				auto; }

	fieldset ol,
	fieldset ul {
		margin: 			0;
		padding: 			0;
		list-style: 		none; }



legend 					 { display: 		none; }
fieldset fieldset legend { display: 		block;
						   font-weight: 	bold;
						   padding-bottom: 	.3em; }



::-moz-focus-inner { border: 0; }


label { margin-bottom: 		.3em; }


input[type="text"],
input[type="email"],
button,
select,
textarea {

	font-size: 				1.2em;


  	vertical-align: 		middle;

	margin: 				0;
	border: 				none;
	border: 				1px solid #000;


	padding: 				.4em .3em;

	-webkit-background-clip: padding;
       -moz-background-clip: padding;
  	        background-clip: padding-box;

  	-webkit-box-sizing: 	border-box;
       -moz-box-sizing: 	border-box;
            box-sizing: 	border-box; }




input[type="text"],
input[type="email"],
textarea,
select {
	width: 					98.5%;
	border: 				1px solid #ccc; }


.ie8 select {
	height: 2em;
}

select {
	position: 				relative;
	z-index: 				1;

	width: 					98.5%;
	height: 				1.8em;
	padding: 				auto .5em !important;
	outline: 				0;

	line-height: 			1;

	-webkit-appearance: 	none;

	-webkit-box-sizing: 	border-box;
       -moz-box-sizing: 	border-box;
            box-sizing: 	border-box;

	-webkit-border-radius: 	0;
	   -moz-border-radius: 	0;
		    border-radius: 	0;


	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAGCAYAAAAc2cSCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUQyQzZBNTA0OTA0MTFFMDhDMkRGRDZGQjgxNUQ4QzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUQyQzZBNTE0OTA0MTFFMDhDMkRGRDZGQjgxNUQ4QzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQUMyQ0ZGNTQ4RkIxMUUwOEMyREZENkZCODE1RDhDMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQUMyQ0ZGNjQ4RkIxMUUwOEMyREZENkZCODE1RDhDMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhQ4KtEAAABeSURBVHjaYjTS0zvMwMBgw4AJpgNx1tmLFxlwASYgLsYi/g6IaxgIAJDmU0C8DE28BmoAQc0gUAbEX6DsC0A8i4EIANP8FIhbkWz9S4xmFiR2HxBLAPFWBiIBQIABAJhkENSat+AJAAAAAElFTkSuQmCC")
				center right no-repeat,
				-webkit-gradient(linear, left top, left bottom, color-stop(0,#fff), color-stop(1,#eee));

	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAGCAYAAAAc2cSCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUQyQzZBNTA0OTA0MTFFMDhDMkRGRDZGQjgxNUQ4QzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUQyQzZBNTE0OTA0MTFFMDhDMkRGRDZGQjgxNUQ4QzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQUMyQ0ZGNTQ4RkIxMUUwOEMyREZENkZCODE1RDhDMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQUMyQ0ZGNjQ4RkIxMUUwOEMyREZENkZCODE1RDhDMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhQ4KtEAAABeSURBVHjaYjTS0zvMwMBgw4AJpgNx1tmLFxlwASYgLsYi/g6IaxgIAJDmU0C8DE28BmoAQc0gUAbEX6DsC0A8i4EIANP8FIhbkWz9S4xmFiR2HxBLAPFWBiIBQIABAJhkENSat+AJAAAAAElFTkSuQmCC")
				10px right no-repeat,
				-webkit-linear-gradient(top, #fff 0, #eee 1);
	background:    -moz-linear-gradient(top, #fff 0, #eee 1);
	background:         linear-gradient(top, #fff 0, #eee 1); }





textarea {
	height: 			20em; }


.form-list-item label  	{ font-weight: normal;
						  text-indent: -.1em;
						  margin-left: 1.2em;
						  margin-right: 1.2em;}



.two input[type="text"],
.two select,
.two textarea {
	width: 				97%; }


.three input[type="text"],
.three select,
.three textarea {
	width: 				95%; }


.four input[type="text"],
.four select,
.four textarea {
	width: 				94%; }


.five input[type="text"],
.five select,
.five textarea {
	width: 				92%; }


.six input[type="text"],
.six select,
.six textarea {
	width: 				90%; }



input[type="radio"],
input[type="checkbox"] {
	border: 			none;
	float: 				left;
	height: 			15px;
	width: 				15px;
	margin: 			.15em .5em auto .1em; }




input[required] {
	content: 			"Required"; }


input:invalid,
textarea:invalid,
.invalid { }



input[type="text"]:focus {
	outline: 			none;
	background: 		#fff; }







/*
** ITEM-LIST
**
** DESCRIPTION:	List of Input Elements
** USAGE:		Used for checkboxes and radio buttons
**
*/
.form-list-item 		{ margin: 			0 0 1em 0; }
.form-list-item li 		{ margin-bottom: 	1em; }
.form-list-item label  	{ font-weight: 		normal;
						  text-indent: 		-.1em;
						  margin-left: 		2em;}

/*
	For radio buttons or checkboxes laid out horizontally
	NOTE: This is just an initial version should be refined
*/

.horizontal {
	margin: 			0 !important;
	overflow: 			hidden; }

	.horizontal li {
		padding: 		0 !important;
		margin: 		0 !important;
		float: 			left; }





/*
** ASIDES FORM ELEMENTS
**
** DESCRIPTION:
** USAGE:
**
*/

#asides form {
	margin:				0 0 0 0 !important; }

#asides fieldset {
	padding: 			0;
	margin: 			0 0 1em 0;
	background: 		none; }

#asides form li {
	margin-bottom: 		1em; }

#asides select, #asides input[type="text"] {
	font-size: 			1em; }

#asides label {
	font-weight: 		normal;
	margin-bottom: 		.2em; }


.required abbr {
	color: 				#f00;
	margin-left: 		.4em;
	font-size: 			1.2em; }


.errorMessage {
	z-index: 			10000;
	display: 			block;
	padding: 			0 10px;
	height: 			auto;

	color: 				#fff;
	font-family: 		sans-serif;
	font-size: 			1em;

	background: 		#f00; }

.errorMessage ul {
	margin: 			0;
	padding: 			.5em 0;
	list-style: 		none; }

.errorMessage li,
.errorMessage li p {
	margin: 			0 !important;
	padding-bottom: 	0 !important; }