/**
 * CSS styles for forms generated by yiic.
 *
 * The styles can be applied to the following form structure:
 *
 * <div class="form">
 *     <div class="row">
 *         <label for="inputid">xyz</label>
 *         <input name="inputid" id="inputid" type="text" />
 *         <p class="hint">hint text</p>
 *     </div>
 *     <div class="row">
 *         <label for="inputid">xyz</label>
 *         <input name="inputid" id="inputid" type="text" />
 *         <p class="hint">hint text</p>
 *     </div>
 *     <div class="row buttons">
 *         <label for="inputid">xyz</label>
 *         <input name="inputid" id="inputid" type="text" />
 *         <p class="hint">hint text</p>
 *     </div>
 * </div>
 *
 * The above code will render the labels and input fields in separate lines.
 * In order to render them in the same line, please use the "wide" form as follows,
 *
 * <div class="wide form">
 *     ......
 * </div>
 *
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @link http://www.yiiframework.com/
 * @copyright Copyright &copy; 2008-2010 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

/** Set Defaults for all inputs within a form */
div.form input{
	width:					200px;
}

div.form input[type='submit']{
	margin-left:			200px;
}

div.form input,
div.form textarea,
div.form select{
	margin:					0.2em 0 0.5em 0;
	padding:				0.4em 0.5em;
	border:					1px solid #464646;
	max-width: 				95%;
	vertical-align:			top;
}

input[type=submit], div.smallform input[type=submit]{
	background:				#464646;
	border:					0;
	color:					#FFFFFF;
	cursor:					pointer;
}

/* Fix to avoid default displays (like rounded buttons in Safari) */
input, textarea, select{
	-webkit-appearance: 	none;
	-moz-appearance: 		none;
	appearance: 			none;
	opactiy: 				1;
}

	/** Enforce radio to remain being a circle */
	input[type='radio']{
		border-radius: 		50% !important;
	}

	/** Define tick within checkbox, since removed by appearance: none */
	input[type='checkbox']:checked:after,
	input[type='radio']:checked:after{
		content: 			'\2713\0020';
	    position: 			relative;
	    top: 				-1.15rem;
	    left: 				-0.4rem;
	    color: 				#ff5b00;
	    font-size: 			1.5rem;
	    font-weight: 		800;
	    border:				0;
	    outline:			0;
	}

	/** Hide outline to prevent ugly 'focus' display */
	input[type='checkbox'],
	input[type='radio']{
		outline:			0 !important;
	}

	/** Add the dropdown sign and ensure there is sufficient space */
	select{
		padding-right: 		2.5rem !important;
		position: 			relative;
		background-color: 	transparent;
		background-image: 	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
		background-repeat: 	no-repeat;
		background-size: 	1.5rem 1rem;
		background-position: right center;
		background-clip: 	border-box;
		-moz-background-clip: border-box;
		-webkit-background-clip: border-box;
	}

/** Make sure directly following inputs have some space in between */
input + input,
textarea + textarea,
select + select{
	margin-left:			0.5em !important;
}

div.form fieldset{
	border: 1px solid #DDD;
	padding: 10px;
	margin: 0 0 10px 0;
}

div.form label{
	font-weight:	bold;
	font-size:		0.9em;
	display:		inline-block;
	width:			200px;
	vertical-align:	middle;
}

div.form .row{
	margin: 5px 0;
}

div.form .hint{
	margin: 0;
	padding: 0;
	color: #999;
}

div.form .note{
	font-style: italic;
}

div.form span.required{
	color: red;
}

div.form div.error label:first-child,
div.form label.error,
div.form span.error{
	color: #C00;
}

div.form div.error input,
div.form div.error textarea,
div.form div.error select,
div.form input.error,
div.form textarea.error,
div.form select.error
{
	background: #FEE;
	border-color: #C00;
}

div.form div.success input,
div.form div.success textarea,
div.form div.success select,
div.form input.success,
div.form textarea.success,
div.form select.success
{
	background: #E6EFC2;
	border-color: #C6D880;
}


div.form .errorSummary
{
	border: 2px solid #C00;
	padding: 7px 7px 12px 7px;
	margin: 0 0 20px 0;
	background: #FEE;
	font-size: 0.9em;
}

div.form .errorMessage
{
	color: red;
	font-size: 0.9em;
	margin-left:		203px;		/* label width */
}

div.form .errorSummary p
{
	margin: 0;
	padding: 5px;
}

div.form .errorSummary ul
{
	margin: 0;
	padding: 0 0 0 20px;
}

div.wide.form label{
	float: left;
	margin-right: 10px;
	position: relative;
	text-align: right;
	width: 100px;
	vertical-align:		top;
}

div.wide.form .row{
	clear: left;
}

div.wide.form .buttons, div.wide.form .hint, div.wide.form .errorMessage{
	clear: left;
	padding-left: 110px;
}

/* Unique forms */
div.smallform{
	text-align:		right;
}

div.smallform input{
	width:			110px;
	margin-bottom:	2px;
	border:			1px solid #464646;
}

/* Registratieform frontpage */
div#register-form{
	text-align:		right;
	clear:			both;
}

div#register-form label{
	width:			50px;
	display:		inline-block;
}

div#register-form input{
	width:			170px;
}

div#register-form input[type='submit']{
	margin-left:	0px !important;
}

div#register-form .errorSummary{
	text-align:		left;
}

div#register-form .errorMessage, div#register-form .errorSummary{
	font-size:		11px;
	margin-left:	0px;
}
/* einde registratie form */


/* Login form rechtsboven */
/* normal sizing in smallforms (registration and login) */
.smallform input[type='checkbox'], 
.smallform input[type='radio']{
	width:				0.8rem !important;
	height:				0.8rem !important;
	margin-bottom:		0;
}

.smallform input[type='checkbox']::after, 
.smallform input[type='radio']::after{
	line-height:		0;
	top:				-0.1rem;
	left:				-0.1rem;
}
/* einde login */


/* User add form */
.contact_container div#user_add_form{
	width:			100%;
}

.tabContent div#user_add_form{
	width:			300px;
}

div#user_add_form label{
	width:			100%;
	display:		block;
}

div#user_add_form input{
	width:			100%;
	display:		block;
}

div#user_add_form input[type='submit'],
div#groep_add_form input[type='submit']{
	margin-left:	0px !important;
}

div#user_add_form .errorMessage, div#user_add_form .errorSummary,
div#groep_add_form .errorMessage, div#groep_add_form .errorSummary{
	font-size:		13px;
	margin-left:	0px;
}

div#user_add_form .column{
	width:			35%;
	display:		inline-block;
	vertical-align: top;
}

div#user_add_form .column.buttons{
	width:			25%;
	text-align:		right;
	vertical-align:	top;
	margin-top:		1em;
}
/* Einde user add form */

/* User groep form */
.groep_container div#groep_add_form{
	width:			100%;
}

div#groep_add_form label{
	width:			75%;
	display:		block;
}

div#groep_add_form input{
	width:			100%;
	display:		block;
}

div#groep_add_form .column{
	display:		inline-block;
	vertical-align: top;
}

div#groep_add_form .column.buttons{
	text-align:		right;
	vertical-align:	top;
	margin-top:		1.1em;
}
/* Einde groep add form */


/* Contactformulier */
#verifyRow .hint, #verifyRow input{
	margin-left:	205px;
	display:		block;
}

/* IE hack */
input[type='checkbox'], input[type='radio']{
	background:			none !important;
	width:				1.3em !important;
	height:				1.3em !important;
}

/** Checkbox label - spacing */
input[type='checkbox'] ~ span{
	margin-left:		0.5rem;
}

/** Mobile forms */
@media only screen and (max-width: 450px) {
	input, textarea, select{
		width:			95% !important;
		padding:		0.2rem;
		font-size:		0.8rem;
	}

	div.form input[type='submit']{
		margin-left:			0px;
	}
}