#headercontainer{
	background: #343536;
	position: fixed;
	width: 100%;
	left: 0;
	right: 0;
	top: 0;
	transition:0.5s;
	border-bottom:#01478C solid 5px;
	font-family: verdana;
}#headercontainer:hover{
	border-bottom:#27CF7B solid 5px;
}
label{
	font-family: auto;
	color: #517CA6;
}
#headercontainer li{
	float: right;
	margin-right: 20px;
	margin-top: -8px;
	margin-bottom: 2px;
	list-style-type: none;
	padding: 6px;
	cursor: pointer;
	transition:0.3s;
	border-bottom: 5px solid #343536;
}
#headercontainer li:hover{
	border-bottom: 5px solid #E6E6E6;;
}
#headercontainer li a{
	color: #E6E6E6;
	font-size: 15px;
	font-family: "exotc350 Bd BT";
}
#header2{
	background: #4585C4;
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	top:45;
	border-bottom: #D2D4D6 solid 5px;
	color: white;
	box-shadow: 0px 1px 3px #818FDB;
	font-family: sans-serif;
}
#plogo{
	float: left;
	right: 0;
	margin-left: 10px;
	margin-top: 5px;
}
body{
	background: #c2d7ed;
}
a{
	text-decoration: none;
	color: #0AABAB;
}
#navcon{
}
.linknav{
	margin-right:40px;
	margin-left:40px;
	margin-top: 40px;
	background:none;
	padding-left:3px;
	padding-right:3px;
	padding-bottom:3px;
	padding-top:3px;
	text-decoration:none;
	color:white;
	font-family: "exotc350 Bd BT";
	font-size:16px;
	transition:0.9s;
}
#content{
	margin-top: 150px;
}
.bla{
	background-color: white;
	padding: 30px;
	border-radius: 5px;
	margin: 30px;
	padding-left: 30px;
	padding-right: 30px;
	margin-left: 2%;
	box-shadow: 1px 1px 4px #7D8EF0;

}
#kiri{
	float: left;
	width:55%;
	min-width: 280px;
	vertical-align: middle;
	text-align: top;
}
#kanan{
	width:23%;
	min-width: 210px;
	float: left;
}
.input{
	background-color:none;
	height:35px;
	color:#666;
	width: 250px;
	margin-top:5px;
	margin-bottom: 5px;
	font-family:"Comic Sans MS", cursive;
	border-radius:5px;
	padding-left: 10px;
	border: #63A4E6 solid 1px;
	transition:0.2s;
}
#input_usm{
	background-color:none;
	height:35px;
	color:#666;
	width: 125px;
	margin-top:5px;
	margin-bottom: 5px;
	font-family:"Comic Sans MS", cursive;
	border-radius:5px;
	padding-left: 5px;
	border: #63A4E6 solid 1px;
	transition:0.2s;
}
#input_dep{
	background-color:none;
	height:35px;
	color:#666;
	width: 70px;
	margin-top:5px;
	margin-bottom: 5px;
	font-family:"Comic Sans MS", cursive;
	border-radius:5px;
	padding-left: 10px;
	border: #63A4E6 solid 1px;
	transition:0.2s;
}
#input_dep:hover{
	box-shadow: #4C85E0 0px 0px 3px inset;
}
.input_min{
	background-color:none;
	height:35px;
	color:#666;
	width: 200px;
	margin-top:5px;
	margin-bottom: 5px;
	font-family:"Comic Sans MS", cursive;
	border-radius:5px;
	padding-left: 10px;
	border: #63A4E6 solid 1px;
	transition:0.2s;
}
.input:focus{
	box-shadow: #4C85E0 0px 0px 8px;
}
#input_usm:focus{
	box-shadow: #4C85E0 0px 0px 8px;
}
#input_lulus{
	background-color:none;
	height:35px;
	color:#666;
	width: 230px;
	margin-top:5px;
	margin-bottom: 5px;
	font-family:"Comic Sans MS", cursive;
	border-radius:5px;
	padding-left: 5px;
	border: #63A4E6 solid 1px;
	transition:0.2s;
}
#input_lulus:focus{
	box-shadow: #4C85E0 0px 0px 8px;
}
.button{
	background-color: #4585C4;
	border: none;
	padding: 5px;
	border-radius: 3px;
	color: white;
	font-family: sans-serif;
	margin-top: 10px;
	margin-left: 5px;
	box-shadow: 1px 1px 2px #7D8EF0;
	cursor: pointer;
}
.reset{
	background-color: #97BBDE;
	border: none;
	padding: 5px;
	border-radius: 3px;
	color: white;
	font-family: sans-serif;
	margin-top: 10px;
	margin-left: 5px;
	box-shadow: 1px 1px 2px #7D8EF0;
	cursor: pointer;
}
#isi{
	width: 100%;
	height: 300px;
}
.kotak{
	background: none;
	width: 38%;
	float: left;
	margin-bottom: 15px;
	font-size: 15px;
	transition:0.3s;
	padding: 4.7px;
	border-radius: 5px;
	padding-left: 60px;
	color: black;
	min-height: 80px;
	border: #B8C7D6 solid 1px;
	box-shadow: 1px 1px 3px #B8C7D6;
}
.kotak u{
	font-size: 16px;
}
.caution{
	background: url(../info.png) no-repeat 2% 50%;
	width: 83%;
	margin: 3%;
	min-width: 200px;
	font-size: 15px;
	padding: 4.7px;
	border-radius: 5px;
	padding-left: 60px;
	color: black;
	border: red solid 1px;
}
.cong_lulus{
	background: url(../smile.png) no-repeat 2% 50%;
	width: 83%;
	margin: 3%;
	min-width: 200px;
	font-size: 15px;
	padding: 4.7px;
	border-radius: 5px;
	box-shadow: 0px 0px 5px green inset;
	padding-left: 60px;
	color: black;
	border: green solid 1px;
}
.caution u{
	font-size: 16px;
}
.cong_lulus u{
	font-size: 16px;
}
#satu1{
	background: url(../onebit_01.png) no-repeat 2% 50%;
}
#satu1:hover{
	background-color: #4585C4;
}
#satu{
	background: url(../pencil48.png) no-repeat 2% 50%;
}
#satu:hover{
	background-color: #4585C4;
}
#dua{
	background: url(../label48.png) no-repeat 2% 50%;
}#dua:hover{
	background-color: #4585C4;
}
#tiga{
	background: url(../qmark48.png) no-repeat 2% 50%;
}
#tiga:hover{
	background-color: #4585C4;
}
#empat{
	background: url(../onebit_14.png) no-repeat 2% 50%;
}
#empat:hover{
	background-color: #4585C4;
}
#lima{
	background: url(../l48.png) no-repeat 2% 50%;
}
#lima:hover{
	background-color: #4585C4;
}
#enam{
	background: url(../postit48.png) no-repeat 2% 50%;
}
#enam:hover{
	background-color: #4585C4;
}
#data_lanjut{
	background: url(../box48.png) no-repeat 2% 50%;
}
#data_lanjut:hover{
	background-color: #4585C4;
}
#cetak_lanjut{
	background: url(../doodles48.png) no-repeat 2% 50%;
}
#cetak_lanjut:hover{
	background-color: #4585C4;
}
#logo{
	width: 90px;
	margin-top: 15px;
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 20px;
	float: left;
}
#footer{
	margin-right: -185px;
	position: fixed;
	right:0;
	width: 200px;
	background: url(../icons/arrow-left.png) no-repeat 2% 50%;
	height: 30px;
	bottom: 10;
	padding: 10px;
	transition:0.3s;
	border: 1px solid green;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
#footer b{
	margin-left: 27px;
	font-size: 12px;
}
#footer:hover{
	margin-right: -3px;
}
.p_pesan{
	background: none;
	padding: 20px;
	width: 75%;
	border:blue 1px solid;
	margin-top: 20px;
	border-radius: 10px;
	padding-top:5px;
	padding-bottom: 5px;
	transition:0.5s;
	float: left;

}
.j_pesan{
	transition:0.5s;
	border-radius: 10px;
	background: none;
	border:red 1px solid;
	padding: 20px;
	padding-top:5px;
	padding-bottom: 5px;
	width: 75%;
	margin-top: 20px;
	float: right;
}
.p_pesan:hover{
	box-shadow: 0px 0px 5px blue;
}
.j_pesan:hover{
	box-shadow: 0px 0px 5px red;
}
.kotak_kecil{
	background: url(../icons/pictures48.png) 50% 120% no-repeat;
	width: 9%;
	margin: 3%;
	display: inline-block;
	color: red;
	font-weight: bold;
	min-width: 100px;
	height: 60px;
	transition:0.3s;
	padding-top: 2px;
	padding: 4.7px;
	border-radius: 5px;
	border: #B8C7D6 solid 0.5px;
	font-size: 10px;

}
.kotak_kecil:hover{
	box-shadow: 1px 1px 8px #B8C7D6;
}
.kotak_kecil img{
	float: right;
	margin-top: 15px;
}
.kotak_print{
	background: url(../icons/fax.png) 50% 80% no-repeat;
	width: 9%;
	margin: 3%;
	display: inline-block;
	color: red;
	min-width: 100px;
	height: 60px;
	transition:0.3s;
	padding-top: 2px;
	padding: 4.7px;
	border-radius: 5px;
	border: #343536 solid 1px;
	font-size: 10px;

}
.kotak_print:hover{
	box-shadow: 1px 1px 8px #B8C7D6;
}