/**
 * CSS for ContractConnect staff login form
 */

/* login form biz name in header */
header > h1 {
	display: inline-block;
	padding: 8px;
	
	font-family: Calibri, sans-serif, Open Sans, Arial;
	font-size: 28px;
	color: rgba(255,255,255,.65);
}

/* login form app name in header */
header > h2 {
	display: inline-block;
	position: absolute;
	top: 0px;
	right: 0px;
	
	text-align: center;
	padding: 3px 5px 0px;
	
	font-family: 'Exo 2', sans-serif, Impact, Calibri, Arial;
	font-weight: bold;
	font-size: 15px;
	color: rgba(255,255,255,.5);
	
	font-variant: small-caps;
}
	
	
/* login form */
main > form#Staff-login {
	display: block;
	text-align: center;
}

/* login form */
main > form#Staff-login {
	font-family: 'Exo 2', sans-serif, Impact, Calibri, Arial;
	font-size: 0px; /* collapse spacing */
}

	/* PIN label */
	main > form#Staff-login > label {
		display: inline-block;
		margin: 5px 0px 5px 0px;
		font-size: 25px;
		font-weight: bold;
	}
	
	/* PIN input */
	main > form#Staff-login > label > input[type="text"],
	main > form#Staff-login > label > input[type="number"] {
		display: inline-block;
		width: 200px;
		margin-top: 10px;
		padding: 7px;
		
		font-size: 25px;
		font-weight: bold;
		font-family: Courier New, Fixedsys;
		text-align: center;
		letter-spacing: 10px;
		
		border: 1px solid rgba(0,0,0,.5);
	}
	
	/* submit button */
	main > form#Staff-login > button[type="submit"] {
		display: inline-block;
		width: 216px;
		padding: 5px 7px 5px 7px;
		
		font-family: 'Exo 2', sans-serif, Impact, Calibri, Arial;
		font-size: 25px;
		color: white;
		text-transform: uppercase;
		
		background: rgb(100,100,150);
		border: 1px solid rgba(0,0,0,.5);
		
		cursor: pointer;
	}
		main > form#Staff-login > button[type="submit"]:hover {
			background: rgb(125,125,175);
			color: white;
		}
		main > form#Staff-login > button[type="submit"]:active {
			background: rgb(50,50,100);
		}
		
		/* icon inside submit button */
		main > form#Staff-login > button[type="submit"] > i.fa,
		main > form#Staff-login > button[type="submit"] > i.fa:hover,
		main > form#Staff-login > button[type="submit"] > i.fa:active {
			color: rgba(255,255,255,65);
			text-shadow: 1px 1px 0px rgba(0,0,0,.75);
		}