/*importing Sniglet*/
@import url("http://fonts.googleapis.com/css?family=Sniglet");

/*basic reset*/
* {margin: 0; padding: 0; box-sizing: border-box;}

main {
	width: 100%; margin: 0 auto; padding-bottom: 10px;
	background: white; border-radius: 3px; overflow: hidden;
}

.flp {padding: 0}
/*Let's place the label over the input*/

.flp ul {
	margin-left: 20px;
}

.flp div {position: relative; margin-bottom: 12px;}

.flp input, .flp label {
	width: 400px; display: block;
	font: inherit; font-size: 13px; line-height: 16px;
	/*fixed height for FF line height issue. 
	height = 24(lineheight) + 10*2(padding) + 2(border)*/
	height: 46px;
	border: 1px solid #999;
}
.flp input {padding: 0px; outline: none; border-radius: 3px;}
.flp label {
	position: absolute; left: 0; top: 0;
	/*left/right padding will be 2px less, adjusted by padding on .ch*/
	padding: 5px 0 0 20px;
	border-color: transparent; color: #666;
	cursor: text;
}

/*label styles*/
.ch {
	display: block; float: left;
	position: relative; /*for upward animation*/
	background: white; 
}
.ch:first-child {padding-left: 2px;}
.ch:last-child {padding-right: 2px;}

/*active input label*/
.focussed {
	/*when any input is already focussed clicking on it(label) again won't do anything*/
	pointer-events: none;
}

.focussed .ch {
font-weight: bold;	
}