@charset "utf-8";
/* CSS Document */

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #E9F2F3;

}

main {

	margin-left:auto;
	margin-right:auto;
	 font: normal Verdana, Tahoma, sans-serif;
	
}

.header {
	width:60%;
	margin-left:auto;
	margin-right:auto;
		padding-left:20px;
		padding-right:10px;
}

.header2 {
	width:100%;
	height:50px;
	margin-left:auto;
	margin-right:auto;
	
		color:white;
}

.kotakpage {
	width:80%;
	background-color:#FFF;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
     box-shadow: 0px 0px 8px grey;
    -moz-box-shadow: 0px 0px 8px grey; 
    -webkit-box-shadow: 0px 0px 8px grey; 
		margin-left:auto;
	margin-right:auto;
		padding-left:20px;
		padding-right:10px;
		padding-top:20px;
		padding-bottom:20px;


	
}

img {
    image-orientation: from-image;
}

.kotakpage2 {
	width:95%;
	background-color:#FFF;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
     box-shadow: 0px 0px 8px grey;
    -moz-box-shadow: 0px 0px 8px grey; 
    -webkit-box-shadow: 0px 0px 8px grey; 
		margin-left:auto;
	margin-right:auto;
		padding-left:20px;
		padding-right:10px;
		padding-top:20px;
		padding-bottom:20px;


	
}

.box2 {
  display: inline-block;
  width: 300px;
  margin: 1em;
  text-align:left;
  background-color:#EBEBEB;
  padding: 15px;

}	  

.style1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:medium;
}

img {
    image-orientation: from-image;
}

input[type=text], [type=password], select, textarea {
  width: 90%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

@media screen and (max-width: 900px) {
.header {
	width:80%;
	margin-left:auto;
	margin-right:auto;
		padding-left:20px;
		padding-right:10px;
}

.kotakpage {
	width:60%;
	background-color:#FFF;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
     box-shadow: 0px 0px 8px grey;
    -moz-box-shadow: 0px 0px 8px grey; 
    -webkit-box-shadow: 0px 0px 8px grey; 
		margin-left:auto;
	margin-right:auto;
		padding-left:20px;
		padding-right:10px;
		padding-top:20px;
		padding-bottom:20px;


	
}


}
@media screen and (max-width: 400px) {
.header {
	width:95%;
	margin-left:auto;
	margin-right:auto;
		padding-left:20px;
		padding-right:10px;
}

.kotakpage {
	width:60%;
	background-color:#FFF;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
     box-shadow: 0px 0px 8px grey;
    -moz-box-shadow: 0px 0px 8px grey; 
    -webkit-box-shadow: 0px 0px 8px grey; 
		margin-left:auto;
	margin-right:auto;
		padding-left:20px;
		padding-right:10px;
		padding-top:20px;
		padding-bottom:20px;


	
}
}

table.sortable
{
	border: 1px solid black;
}
table.sortable th
{
	border: 1px solid black;
	background-color:#333;
	color:#FFF;
}
table.sortable td
{
	border: 1px solid black;
}
table.sortable tbody {
    counter-reset: sortabletablescope;
	border: 1px solid black;
}
table.sortable thead tr::before {
    content: "BIL";
	font-weight:bold;
    display: table-cell;
	text-align:center;
	border: 1px solid black;
	background-color:#333;
	color:#FFF;

}
table.sortable tbody tr::before {
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
    display: table-cell;
	text-align:center;
	border: 1px solid black;

}