@import url('http://fonts.googleapis.com/css?family=Open+Sans');
@font-face{
	src:url("http://dl.dropbox.com/u/94346812/cssdeck/fonts/pictos-regular-webfont.ttf") format("truetype"),
		url("http://dl.dropbox.com/u/94346812/cssdeck/fonts/pictos-regular-webfont.otf") format("opentype"),
		url("http://dl.dropbox.com/u/94346812/cssdeck/fonts/pictos-regular-webfont.svg") format("svg");
	font-family:icon;
}
#floater	{float:center; height:100%; margin: auto;
}
#content	{clear:both;margin: 5% 5% 0px 5%;
}
#block:before{
	content:'';
	display:block;
	height:3px;
}

#block{
	width:250px;
	height:213px;
	margin:auto;
	display:block;
}

#block #name, #block #password{
	font-family:'Open Sans';
	font-weight:300;
	-webkit-font-smoothing: antialiased;
	font-size:18px;
	padding-left:10px;
	padding-right:10px;
}

#user {
		display:block;
		margin:3px 10px;
}


#name {
	width:196px;
	height:32px;
	border:0;
	border-radius:  2px 0px 0px 2px;	
		position: relative;
}



#pass {
		display:block;
}

#password{
	width:196px;
	height:32px;
	border:0;
	border-radius:  2px 0px 0px 2px;	
		position: relative;

}


#btn_CheckUser{
	height:32px;
	width:34px;
	border:0;
	border-radius:  0px 2px 2px 0px;	
	background:#d1d1d1  url('../images/login.png') no-repeat center center;
	padding: 0;
	position: relative;
margin-left: -4px;
vertical-align: bottom;
}



#submit{
	height:32px;
	width:34px;
	border:0;
	border-radius:  0px 2px 2px 0px;	
	background:#d1d1d1  url('../images/login.png') no-repeat center center;
	padding: 0;
	position: relative;
margin-left: -4px;
vertical-align: bottom;


}
#submit:hover{
	color:#fff;
	
}




/* placeholder */
::-webkit-input-placeholder {
	-webkit-font-smoothing: antialiased;
	color:#999;
	font-size:16px;
}
:-moz-input-placeholder {  
	color:#999;
	font-size:16px;
}

/* Want to see the magic ? So open a webkit browser then remove the comments below ! 

/!\ YOU NEED TO PLACE THIS IN INPUTS /!\

oninvalid="setCustomValidity('Custom Message')"
*/
/*
input::-webkit-validation-bubble-message {
	color:white;
	background: #e62163;
  border:0;
	border-radius:0;
	padding:0;
	width:55px;
	height:34px;
	position:absolute;
	float:left;
	margin:-33px 208px;
	text-align:center;
	line-height:2.7em;
	box-shadow:0 0 0;
}
input::-webkit-validation-bubble-message:before {
	content:"X";
	display:block;
	font-family:icon;
	color:white;
	background: #e62163;
  border:0;
	border-radius:0;
	padding:0;
	width:34px;
	height:34px;
	position:absolute;
	float:left;
	margin:0px -208px;
	text-align:center;
	line-height:2.7em;
	color: #fff;
	border-top-left-radius:2px;
	border-bottom-left-radius:2px;
	-webkit-font-smoothing: antialiased;

}
input::-webkit-validation-bubble-icon {
	display: none;
}
input::-webkit-validation-bubble-arrow {
	background: #e62163;
	border:0;
	width:10px;
	height:10px;
	position:absolute;
	margin:-23px 178px;
}*/



.square {
	width: 22%;
	max-width: 50px;
	height: 50px;
	background: rgba(255,255,255,0.7);
	position: relative;
display: inline-block;
margin: 5px 5px;
}

.digit-input {
	width: 22%;
	max-width: 50px;
	height: 50px;
	background-color: rgba(255,255,255,.9);text-align: center;
font-size: 40px;
padding: 0px;
}