/*
	CSS						- inlog
	Thema					- Algemeen/Admin
	Bijgewerkt		- 02-05-2013
*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url('font-awesome.css');
/*							Globale stijlen						*/
*,
*:after,
*:before				{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }
.clearfix:after	{ content: ""; display: table; clear: both; }

html						{ height: 100%; }
body						{ font-family: 'Lato', Calibri, Arial, sans-serif; font-weight: 300; font-size: 15px; color: #333; -webkit-font-smoothing: antialiased; overflow-y: hidden; overflow-x: hidden; background: linear-gradient( to bottom, rgba(30, 0, 0, 0.5), rgba(0, 0, 0, 1) ), url(inlog.jpg) no-repeat center top; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; }
a								{	color: #555; text-decoration: none; }
p								{ padding:0 4px; }
.container			{	width: 100%; position: relative; background:url(tril1o-groot.png) no-repeat top right; }
.clr						{ clear: both; padding: 0; height: 0; margin: 0; }
.main						{	width: 90%; margin: 0 auto; position: relative; }
.container > header			{ margin: 10px; padding: 20px 10px 10px 10px; position: relative; display: block; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); text-align: center; }
.container > header h1	{ font-size: 30px; line-height: 38px; margin: 0; position: relative; font-weight: bold; color: #666; text-shadow: 0 1px 1px rgba(255,255,255,0.6); }
.container > header h2	{ font-size: 14px; font-weight: 300; margin: 0; padding: 15px 0 5px 0; color: #666; font-family: Cambria, Georgia, serif; font-style: italic; text-shadow: 0 1px 1px rgba(255,255,255,0.6); }
.support-note span			{ color: #ac375d; font-size: 16px; display: none; font-weight: bold; text-align: center; padding: 5px 0; }
/* 							Inlogscherm						*/
.form-inlog			{ width: 340px; margin: 60px auto 30px; padding: 15px; position: relative; background: #fffaf6; border-radius: 4px; color: #7e7975; box-shadow: 0 2px 2px rgba(0,0,0,0.2), 0 1px 5px rgba(0,0,0,0.2), 0 0 0 12px rgba(255,255,255,0.4); }
.form-inlog h1	{ font-size: 15px; font-weight: bold; color: #bdb5aa; padding-bottom: 8px; border-bottom: 1px solid #EBE6E2; text-shadow: 0 2px 0 rgba(255,255,255,0.8); box-shadow: 0 1px 0 rgba(255,255,255,0.8); }
.form-inlog h1 .log-in,
.form-inlog h1 .sign-up						{ display: inline-block; text-transform: uppercase; }
.form-inlog h1 .log-in						{ color: #6c6763;	padding-right: 2px; }
.form-inlog h1 .sign-up 					{ color: #ffb347; padding-left: 2px; }
.form-inlog .float								{ width: 50%; float: left; padding-top: 15px; border-top: 1px solid rgba(255,255,255,1); }
.form-inlog .float:first-of-type	{ padding-right: 5px; }
.form-inlog .float:last-of-type		{ padding-left: 5px; }
.form-inlog label									{ display: block; padding: 0 0 5px 2px; cursor: pointer; text-transform: uppercase; font-weight: 400; text-shadow: 0 1px 0 rgba(255,255,255,0.8); font-size: 11px; }
.form-inlog label i								{ margin-right: 5px; display: inline-block; width: 10px; }
.form-inlog input[type=text],
.form-inlog input[type=password]	{ font-family: 'Lato', Calibri, Arial, sans-serif; font-size: 13px; font-weight: 400; display: block; width: 100%; padding: 5px; margin-bottom: 5px; border: 3px solid #ebe6e2; border-radius: 5px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.form-inlog input[type=text]:hover,
.form-inlog input[type=password]:hover	{ border-color: #64d5ff; }
.form-inlog label:hover ~ input					{ border-color: #64d5ff; }
.form-inlog input[type=text]:focus,
.form-inlog input[type=password]:focus	{ border-color: #34a5cf; outline: none; /* Remove Chrome's outline */ }
.form-inlog input[type=submit],
.form-inlog .site					{ width: 49%; height: 38px; float: left; position: relative; box-shadow: inset 0 1px rgba(255,255,255,0.3); -webkit-border-radius: 5px; -moz-border-radius: 5px;   border-radius: 5px; cursor: pointer; font-family: 'Lato', Calibri, Arial, sans-serif; font-size: 14px; line-height: 38px; text-align: center; font-weight: bold; }
.form-inlog input[type=submit]		{ margin-left: 1%; background: #34a5cf; /* Fallback */ background: -moz-linear-gradient(#34a5cf, #2a8ac4); background: -ms-linear-gradient(#34a5cf, #2a8ac4); background: -o-linear-gradient(#34a5cf, #2a8ac4); background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4)); background: -webkit-linear-gradient(#34a5cf, #2a8ac4); background: linear-gradient(#34a5cf, #2a8ac4); border: 1px solid #2b8bc7; color: #ffffff; text-shadow: 0 -1px rgba(0,0,0,0.3); }
.form-inlog .site					{ margin-right: 1%; background: #eee; /* Fallback */ background: -moz-linear-gradient(#eee, #ccc); background: -ms-linear-gradient(#eee, #ccc); background: -o-linear-gradient(#eee, #ccc); background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#ccc)); background: -webkit-linear-gradient(#eee, #ccc); background: linear-gradient(#eee, #ccc); border: 1px solid #aaa; color: #666; text-shadow: 0 1px rgba(255,255,255,0.3); text-decoration: none; }
.form-inlog input[type=submit]:hover,
.form-inlog .site:hover		{ box-shadow:inset 0 1px rgba(255,255,255,0.3), inset 0 20px 40px rgba(255,255,255,0.15); }
.form-inlog input[type=submit]:active,
.form-inlog .site:active	{ top: 1px; }
.aanmeld_fout							{ width: 340px; margin: 60px auto 30px; padding: 15px; position: relative; background: #ff0000; border-radius: 4px; color: #7e7975; box-shadow: 0 2px 2px rgba(0,0,0,0.2), 0 1px 5px rgba(0,0,0,0.2), 0 0 0 12px rgba(255,255,255,0.4); 	font-size: 105%;	font-weight:bold;	color:#900;	background:#fec url(error_small.png) no-repeat 95% center;}

/* 						Terugval voor verkenners die geen box shadows ondersteunen */
.no-boxshadow .form-inlog input[type=submit]:hover	{ background: #ffb347; }
.no-boxshadow .form-inlog .site:hover				{ background: #2a8ac4; }
.form-inlog p:last-of-type									{ clear: both; }
.form-inlog .opt														{ text-align: right; margin-right: 3px; }
.form-inlog label[for=showPassword]					{ display: inline-block; margin-bottom: 10px; font-size: 11px; font-weight: 400; text-transform: capitalize; }
.form-inlog input[type=checkbox]						{ vertical-align: middle; margin: -1px 5px 0 1px; }