/*
==============================================================================
**
** 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"] { vertical-align: baseline; }
.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-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }



form {
	font-size: 1em; }

	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"],
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"], 
textarea,
select {
	width: 97%;
	
	border: 1px solid #ccc;
	
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.15);
	   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,.15);
	        box-shadow: inset 0 0 5px rgba(0,0,0,.15);  }
	        
	        
select {
	position: relative;
	z-index: 1;
	
	width: 98.5%;
	height: 2.3em;
	padding: auto .5em !important;
	
	outline: 0;
	
	-webkit-appearance: none; 
	
	
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
	   -moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
	        box-shadow: 0 0 5px rgba(0,0,0,.2);
	        
	-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:    -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: 96%; }

	
.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;

	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.2);
	   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,.2);
	        box-shadow: inset 0 0 5px rgba(0,0,0,.2); 
	        
 	-webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);
	   -moz-box-shadow: 0 0 15px rgba(0,0,0,.2);
	        box-shadow: 0 0 15px rgba(0,0,0,.2); }







/*
** 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 {
	overflow: hidden; }
	
	.horizontal li {
		margin-right: 1em;
		float: left; }





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

#asides form {}

#asides fieldset {
	padding: 0;
	margin: 0 0 2em 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; }





/*
** 768
**
** DESCRIPTION:	Styles that apply to screens 768 pixels wide and down
** USAGE:		
** NOTES: Typically this means mobile phones held in landscape
**
*/
@media only screen and (max-width: 767px) {
	

.errorMessage {

	position: absolute !important;
	left: 9.3% !important;
	width: 76%;
}


form .two li,
form .three li,
form .four li,
form .five li,
form .six li 	{ width: 100%; margin-left: 0 }	
	
	     
.two input[type="text"],
.two select,
.two textarea,
.three input[type="text"],
.three select,
.three textarea,
.four select,
.four textarea,
.five input[type="text"],
.five select,
.five textarea,
.six input[type="text"],
.six select,
.six textarea {
	width: 100%; }

	
	
}