/* Forms */

.form-box input.incorrect { background-color: #ff8686 }
.form-box input.correct { background: #abff87 }

.form-box input.inline {  }

.form-box { float:left }
.form-box * { box-sizing: border-box; outline: none !important }

.form-box label { 
	display: inline-block; 
	overflow:hidden;
	max-width: 100%; 
	margin-bottom: 5px; 
	font-size:80%; 
	font-weight: 600; 	
}
.form-box label.sided { 
	display: block;
	margin:none; 
	padding:10px 12px 0 0;
	text-align:right; 
}

input[readonly="readonly"], input[readonly] { border: 1px dashed silver !important; color: gray !important }
input[readonly="readonly"]:hover, input[readonly]:hover { background: none }

.form-box input[type=text], .form-box input[type=password], textarea, .content-editable { 
	display: block; 
	width:  100%;
	height: 34px;
	padding: 6px 8px; 
	margin:0 0 12px 0; 
	font-size:100%;
	color: #555; 
	/*background-color: #fff;*/
	border-radius: 0; 	
	box-shadow: inset 0 1px 1px rgba(0,0,0,0); 
	border: 1px solid #DDD; 
	font-family: sans-serif
}
.content-editable { display: block; height: auto }

.form-box textarea { 
	height:auto; 
	font-size:90% 
}
.form-box input[type=checkbox] {
    display: inline-block; 
    vertical-align:middle;
	margin:10px 0 12px 0; 
}
.form-box input[type=radio] {
    display: inline; 
    vertical-align:middle;
	margin:10px 0 12px 0; 
}
.form-box input[type=checkbox] + label { display: inline-block; margin-bottom: 0px}
.form-box input[type=radio] + label { display: inline-block; margin-bottom: 0px}



.form-box input[type=text]:focus, .form-box input[type=password]:focus, textarea:focus, .content-editable:focus { background:#f3f3f3 }

.form-box .helper { 
	display:block; 
	margin:-8px 0 12px 0;
}