@media only screen and (max-width: 699px) {
    /* Desktop, Tablet & Mobile. */
}
@media only screen and (min-width: 1000px) {
    /* Desktop & Tablet */
}
@media only screen and (min-width: 700px) and (max-width: 999px) {
     /* Desktop & Tablet */
}
@media only screen and (max-width: 1024px) {
     /* Desktop & Tablet */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Desktop & Tablet */
}
@media only screen and (max-width: 767px) {
    /* Tablet (Portrait) */
}
@media only screen and (min-wdth: 480px) and (max-width: 767px) {
    /* Tablet (Portrait) & Mobile (Landscape) */
}
@media only screen and (max-width: 479px) {
    /* Mobile */
}
<meta name="viewport" content="width=device-width,initial-scale=1.0" />



#wrap{
	width:100%;
	margin-right:auto;
	margin-left:auto; 
	border:none; 
	 font-family: 'Arial';
	
}
html{width: 100%;
height:100%;
box-sizing:border-box;
}

html,body{
	margin: 0px auto 0px;
	
    font-family: 'Arial';
	font-size: 12px;
	width: 100%;
	min-height: 100vh;
	background-color: #0099FF;
	 padding-bottom: 6rem;
}
#header{
	height:7%;
	width: 95%;
	background-color: #006699;
	margin-left:2%;
	margin-right:2%;
	border-radius:10px;
	
}
#main{
	
	width: 95%;
	border:#000000;
	margin-left:2%;
	margin-right:2%;
	margin-top:1%;
	background-color: #FFFFFF;
	border-radius:10px;
    font-family: 'Arial' !important;
	min-height:80vh;
	
	
	
}
#main2{
	
	width: 95%;
	border:#000000;
	margin-left:2%;
	margin-right:2%;
	margin-top:1%;
	background-color: #FFFFFF;
	border-radius:10px;
    font-family: 'Arial';
	min-height:80vh;
	
	
	
}


#isi{
width:98%;
	margin-left:1%;
	margin-right:1%;
    font-family: 'Arial';

	

	
}
#footer{
	height: 50px;
	width: 95%;
	font-family: 'Lucida Handwriting';
	font-size: 12px;
	float:bottom;
	
   
	
	
}
#menu{
	
	
}

.table-main {
	font-family: 'Arial';
	clear: both;

	border-collapse: collapse;
	margin: 0px 0px 0px 0px;
	border: none;
	width: 80%;
	height:90%;
	background-color: #FFFFFF;
	
	border-radius: 10px;
	
	
}
.table-main td {	
	color: #333;
	border-collapse: collapse;
	vertical-align: center;
	padding: 0px;
	border:none;
	font-family: 'Arial';
}
.table-main ul{ padding:0px; margin:0px 5px; width:100%;}
.table-main li{ padding:0px; margin:0px 0px 5px 0px;}
.table-main li a{ padding:5px; margin:0px 0px 0px 0px; color:#009900; 
	font-size:13px; 
	font-weight:bold; 
	text-decoration:none;
	display: block; 
	background:url(../images/Buttun_Normal.gif) repeat-x;}
.table-main li a:hover{color:#000000;}

.table-list {
	clear: both;
	text-align: left;
	border-collapse: collapse;
	margin: 0px 0px 10px 0px;
	background: #fff;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	-moz-border-radius: 3px x 8px;
	-webkit-border-radius: 3px;
	border-radius: 10px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
	font-family: 'Arial';
}
.table-list th {
	color: #333; font-size: 14px; 
	font-weight: 700; 
	margin: 2px 2px 2px 2px; 
	padding: 5px 5px; 
	background: url(../images/head_white.jpg) repeat-x top #fff; 
	border-bottom: 1px solid #CCC; 	
	border-top: 2px solid #0066FF;
	 font-family: 'Arial';
	border-top-radius: 10px;
}
.table-list tr {
}

.table-list td {
	color: #333;
	font-size:12px;
	border-color: #fff;
	border-collapse: collapse;
	vertical-align: center;
	padding: 3px 5px;
	border-bottom:1px #CCCCCC solid;
	border-radius: 10px;
}


.table-main textarea:focus{background:#E8E8E8;}
.table-main input:focus{background:#E8E8E8;}
.table-main select:focus{background:#E8E8E8;}

.selKecil {
	color: #333;
	font-size:12px;
	border-color: #fff;
	border-collapse: collapse;
	vertical-align: center;
	padding: 3px 5px;
	border-bottom:1px #CCCCCC solid;
}

input.angkaC {
	text-align:center;
}
input.angkaL {
	text-align:left;
}
input.angkaR {
	text-align:right;
}

.footer{
	height:20px;
	width:100%;
	overflow:hidden;
	margin:0px;
	padding:0px; 
	border-top:none;
}



.imgBox { 
	margin-bottom:0px;
	margin-right:5px;
	margin-left:0px;
	padding:0px;
	float:left;
	font-size:12px;
}
.table-baru {
	clear: both;
	text-align: left;
	border-collapse: collapse;
	margin: 0px 0px 10px 0px;
	background:#fff;

	
}
.table-baru th {
	color: #333; font-size: 12px; 
	font-weight: 700; 
	margin: 2px 2px 2px 2px; 
	padding: 5px 5px; 
	background: url(../images/head_white.jpg) repeat-x top #fff; 
	border-bottom: 1px solid #CCC; 	
	border-top: 2px solid #FF9900;
}
.table-baru tr {}

.table-baru td {
	color: #333;
	font-size:12px;
	border-color: #fff;
	border-collapse: collapse;
	vertical-align: center;
	padding: 3px 5px;
	border-bottom:1px #CCCCCC solid;
}

.table-listA {
	clear: both;
	text-align: left;
	border-collapse: collapse;
	margin: 0px 0px 5px 0px;
	background:#fff;	
}
.table-listA th {
	color: #333; font-size: 10px; 
	font-weight: 700; 
	margin: 2px 2px 2px 2px; 
	padding: 5px 5px; 
	background: url(../images/head_white.jpg) repeat-x top #fff; 
	border-bottom: 1px solid #CCC; 	
	border-top: 2px solid #FF9900;
}
.table-listA tr {}

.table-listA td {
	color: #333;
	font-size:10px;
	border-color: #fff;
	border-collapse: collapse;
	vertical-align: center;
	padding: 3px 5px;
	border-bottom:1px #CCCCCC solid;
}


.table-listT {
	clear: both;
	text-align: left;
	border-collapse: collapse;
	margin: 0px 0px 10px 0px;
	background:#fff;
  font-family: 'Arial';
}
.table-listT th {
	color: #333; font-size: 14px; 
	font-weight: 700; 
	margin: 2px 2px 2px 2px; 
	padding: 5px 5px; 
	background: url(../images/head_white.jpg) repeat-x top #fff; 
	border-bottom: 1px solid #CCC; 	
	border-top: 2px solid #006699;
	
}
.table-listT tr {}

.table-listT td {
	
	font-size:12px;
	border-collapse: collapse;
	vertical-align: center;
	padding: 3px 5px;
	
}
<!--menu-->
* {
	margin:0; padding:0; 
	}	
	
	.menu{
		
	width:100%; height:3%;


	 z-index: 9999;


	}
	
	.menu ul{ 
	
	list-style:none; overflow:hidden;
	

	 z-index: 9999;
	}	

	.menu li{
     z-index: 8888;
	display:inline; float:left;
	width:130px;
	 
	
	}
		/*last menu item should not have a blue pipe*/
		.menu > ul > li:last-child{
		border:0; 
		 z-index: 9999;
		}
	.menu li a{
	margin: 0 auto;
	width:130px; 
	padding: 0;
	display: block;

	color: #FFF;
	letter-spacing: 0.1em;
	font: 400 12px/37px Arial, Helvetica, Verdana, sans-serif;
	text-align: center;
	text-decoration: none;
	transition: background 0.5s ease;
	-webkit-transition: background 0.5s ease;
	-moz-transition: background 0.5s ease;
	 z-index: 9999;
	}
		.menu li a:hover{
		background:#4a89bc url(images/topnavbg2.jpg) repeat-x top left;
		 z-index: 9999;
		
		}
	/*child*/
	.menu ul ul.child{
	background:#000;
	height:0; width:0;
	float:left; 
	visibility:hidden;
	
	 z-index: 9999;
	border-radius: 0px 0px 8px 8px;
	-webkit-border-radius: 0px 0px 8px 8px;
	-moz-border-radius: 0px 0px 8px 8px;		
	
	transition:all 0.5s ease;	
	-moz-transition:all 0.5s ease;	
	-webkit-transition:all 0.5s ease;	
	-ms-transition:all 0.5s ease;	
	-o-transition:all 0.5s ease;		
	}
		.menu ul ul.child li{
		float:left; clear:both;	
		 z-index: 9999;
		}		
		.menu ul ul.child li a{
		border:0; 
		 z-index: 9999;
		}		
	/*show hidden sub menu when parent li is hovered*/
	.menu ul li:hover ul.child{
	background: #0099FF;
	height: auto;
	width: 130px;
	visibility: visible;
	display: block;
	position:fixed;
	top:25px;
	 z-index: 9999;

	}		
		.menu ul:hover ul.child li a{
		border:0;  
		 z-index: 9999;
		}		
		.menu ul li:hover ul.child li a:hover{
		background:#165d93;
		 z-index: 9999;
		
		-webkit-transition:background 0.5s ease;
		-moz-transition:background 0.5s ease;
		transition:background 0.5s ease;	
		
		border-radius: 8px 8px 8px 8px;
		-webkit-border-radius: 8px 8px 8px 8px;
		-moz-border-radius: 8px 8px 8px 8px;				
		}		


.table-input {
	
	text-align: left;
	margin: 0px 0px 10px 0px;
	 font-family: "Ubuntu C", sans-serif;
	background-color:#999999;
	 box-shadow:0px 0px 10px #000;
	 border-radius:10px;
	 
}
.table-input th {
	color: #FFFFFF; 
	font-size: 16px; 
	font-weight: 700; 
	margin: 2px 2px 2px 2px; 
	padding: 5px 5px; 
	background-color:rgba(0,0,0,0) ;	
    border:none !important;

	
	border-radius:20px;
	
	
}
.table-input tr {


}

.table-input td {
	color: #333;
	font-size:14px;
	border-color: #fff;
	vertical-align: center;
	padding: 5px 5px;
 background-color:rgba(0,0,0,0) ;	
 border:none !important;


		
}

.tombol{
  height:30px;
  width:159px;
  background:#fff;
  border:1px solid #999999;
  border-radius:20px;	
  color: slategrey;
  text-transform:uppercase;
font-family: "Ubuntu C", sans-serif;
  cursor:pointer;
  }
  
  .border_table {
  border:2px solid #999;
  background:#006699;
  border-radius:10px;
  box-shadow:0px 0px 10px #000;
  max-width:auto;
  height:auto;
  position: static ;
   
  
  
}
<!--confirm-->
#confirmOverlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background:url('../images/ie.png');
	background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);
	z-index:100000;
}

#confirmBox{
	background:url('../images/body_bg.jpg') repeat-x left bottom #e5e5e5;
	width:460px;
	position:fixed;
	left:50%;
	top:50%;
	margin:-130px 0 0 -230px;
	border: 1px solid rgba(33, 33, 33, 0.6);
	
	-moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
	-webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
	box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
}

#confirmBox h1,
#confirmBox p{
	font:26px/1 'Arial';
	background:url('../images/header_bg.jpg') repeat-x left bottom #f5f5f5;
	padding: 18px 25px;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
	color:#666;
}

#confirmBox h1{
	letter-spacing:0.3px;
	color:#888;
}

#confirmBox p{
	background:none;
	font-size:16px;
	line-height:1.4;
	padding-top: 35px;
}

#confirmButtons{
	padding:15px 0 25px;
	text-align:center;
}

#confirmBox .button{
	display:inline-block;
	background:url('../images/buttons.png') no-repeat;
	color:white;
	position:relative;
	height: 33px;
	
	font:17px/33px 'Arial';
	
	margin-right: 15px;
	padding: 0 35px 0 40px;
	text-decoration:none;
	border:none;
}

#confirmBox .button:last-child{	margin-right:0;}

#confirmBox .button span{
	position:absolute;
	top:0;
	right:-5px;
	background:url('../images/buttons.png') no-repeat;
	width:5px;
	height:33px
}

#confirmBox .blue{				background-position:left top;text-shadow:1px 1px 0 #5889a2;}
#confirmBox .blue span{			background-position:-195px 0;}
#confirmBox .blue:hover{		background-position:left bottom;}
#confirmBox .blue:hover span{	background-position:-195px bottom;}

#confirmBox .gray{				background-position:-200px top;text-shadow:1px 1px 0 #707070;}
#confirmBox .gray span{			background-position:-395px 0;}
#confirmBox .gray:hover{		background-position:-200px bottom;}
#confirmBox .gray:hover span{	background-position:-395px bottom;}


{
	margin:0;
	padding:0;
}


.flatbtn-blu { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  border-radius:10px;
  outline: 0;
  border: 0;
  color: #edf4f9;
  text-decoration: none;
  background-color: #4f94cf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  font-size: 1.3em;
  font-weight: bold;
  padding: 12px 26px 12px 26px;
  line-height: normal;
  text-align: center;

  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.flatbtn-blu:hover {
  color: #fff;
  background-color: #519dde;
}
.flatbtn-blu:active {
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}