*{
	margin:0px;
	padding:0px;
}
@font-face{font-family:Walkway_UltraBold;src:url('Walkway_UltraBold.ttf') format("truetype");} 	
@font-face{font-family:ostrich-rounded;src:url(ostrich-rounded.ttf) format("truetype");}
body{
	background: #828282;
	font-family:Walkway_UltraBold;
}
#wraper{
	width:800px;
	margin:0 auto;
	margin-top:75px;
}

header{
	font-family:Walkway_UltraBold;
	display:block;
	width:100%;
	background: #f4f4f4;
	box-shadow: 0 0 10px 0 rgba(0,0,0,.3);

}
header.page-header {
background: #fefefe;
border-top: 20px solid #1b6eb9;
border-bottom: 3px solid #b92625;
color: white;

font-weight: 500;
position: fixed;
width: 100%;
top: 0;
z-index: 9999;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.2),0 -1px 0 rgba(255,255,255,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.2),0 -1px 0 rgba(255,255,255,0.3);
}
header.page-header::before{
	content: "";
background: url(../img/header-pattern1.jpg);
position: absolute;
top: -20px;
height: 20px;
width: 100%;
-webkit-background-size: cover cover;
background-size: cover;
}
header h1{

	font-size:1.8em;
	margin-top:-40px;
	margin-left:50px;
	margin-bottom:10px;
	color:#464646;
	
}

#hin{
	width:460px;
	margin:0 auto;
	padding:12px;

}

.box{
	width:250px;
	margin:0 auto;
	font-family: sans-serif;
	padding:40px 40px 40px 40px;
	border:1px solid #d3d3d3;
	
	background: #fff;
	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.2),0 -1px 0 rgba(255,255,255,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.2),0 -1px 0 rgba(255,255,255,0.3);
}
.box img{
	width:100%;
	padding-bottom:10px;
}
.box h2{
	color:#464646;
	text-align:center;
}
.one{
	border-top:1px solid #b8b8b8;
	border-bottom:1px solid #ffffff;
	margin-top:5px;
	margin-bottom:5px;
}
label {
	position:absolute;
	display:block;
	width:40px;
	height:40px;

	
}
.user{
	background: rgba(65,72,72,0.75) url(../img/user-icon.png) no-repeat center;
}
.pas{
	background: rgba(65,72,72,0.75) url(../img/pass-icon.png) no-repeat center;	
}
.jen{
	background: rgba(65,72,72,0.75) url(../img/fingerprint.png) no-repeat center;	
	background-size:50%;
}
.ket{
	background: rgba(65,72,72,0.75) url(../img/pencil.png) no-repeat center;	
	background-size:50%;
}
input[type='text'], input[type='password']
{

	padding:9px;
	font-size:1.05em;
	border:1px solid rgba(65,72,72,0.25	);
	margin-left:40px;

	width:75%;
	transition: background ease 0.5s;
	box-shadow: inset -1px 1px 2px rgba(0,0,0,0.20);
	-moz-box-shadow: inset -1px 1px 2px rgba(0,0,0,0.20);
	-webkit-box-shadow: inset -1px 1px 2px rgba(0,0,0,0.20);
	background: rgba(255,255,255,0.5);
}
select
{

	padding:9px;
	font-size:1.05em;
	border:1px solid rgba(65,72,72,0.25	);
	margin-left:40px;

	width:82%;
	transition: background ease 0.5s;
	box-shadow: inset -1px 1px 2px rgba(0,0,0,0.20);
	-moz-box-shadow: inset -1px 1px 2px rgba(0,0,0,0.20);
	-webkit-box-shadow: inset -1px 1px 2px rgba(0,0,0,0.20);
	background: rgba(255,255,255,0.5);
}
input[type='text']:hover, input[type='password']:hover,input[type='text']:focus, input[type='password']:focus,select:hover,select:focus{
	background: rgba(238,238,236,0.5);
}

td{
	padding:10px 0px;
}
input[type='submit']{
	font-family:Walkway_UltraBold;
	margin-top:10px;
		padding: 11px 25px;
	width:100%;
	
	font-weight: 300;
	font-size: 18px;
	color: #fff;
	
	
	background: #a11913;
	border: 1px solid #a11913;
	border-bottom : 5px solid #731511;
	
	cursor: pointer;


}
input[type='submit']:hover{
	background: #a63631;
	border: 1px solid #a63631;
	border-bottom : 5px solid #731511;
	
}
footer{
	width:100%;
	position:fixed;
	bottom:0px;
	font-family:Walkway_UltraBold;
	text-align:center;
	padding:20px;
	background: #fff;
	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.2),0 -1px 0 rgba(255,255,255,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.2),0 -1px 0 rgba(255,255,255,0.3);
	color:#8C8C8C;
}
.table-border td{
	padding:5px;
	border:1px solid #000;
}
.pesan{
	width:340px;
	margin:0 auto;
	margin-bottom:20px;
	color:#ffff;
	display: block;
	padding: 10px;
	background-color: #a63631;
	text-align: center;
}