/*===Desktop Style===*/
    /*===================*/
	html{
		height:100%;
	}
	 body {
      margin:0;
	  padding:0;
	  height:100%;
	  font-family:arial;
	  font-size:14px;
	  background-color:#f2f6f6;
	  
    }
    div.con_login {
      width: 210px;
      padding: 10px 50px 40px 30px;
      background-color: white;
      margin: 40px auto;
      box-shadow: 1px 0px 10px, -1px 0px 10px ;
	  color:#4e4c4b;
	  font-family:arial;
	  font-size:14px;
    }
	.logo_login{
	   width : 100px;
	   margin-left:60px;
	}
    p {
      margin:0;
    }
    fieldset.f_login {
      padding:20px;
      width: 190px;
      margin: auto;
    }
    .form_login input.penuh {
      margin-bottom:10px;
	  width:92%;
	  font-size:1.2em;
	  padding:5px;
    }
    .form_login input[type=submit] {
      float:right;
	  padding:8px 18px 8px 18px;
	  background-color:#282522;
	  border:0;
	  color:white;
	  border-radius: 5px 5px 5px 5px;
    }
	.form_login input[type=submit]:hover{
		background-color:#393633;
		cursor:pointer;
		
	}
    .form_login label {
      width:80px;
      float:left;
      margin-right:10px;
    }
    .error_login {
	  width:100%;
	  margin:5px 0px 5px 0px;
      background-color: #FFECEC;
      padding: 10px 10px;
      border: 1px solid red;
      box-shadow: 1px 0px 3px red ;
    }
	.container{
		height:100%;
	}
	#header{
		min-height:35px;
		
		
		background-color:#282522;
		padding:0;
		padding-left:10px;
		padding-right:10px;
	}
	#header table{
		width:100%;
	}
	#header .jdl_head{
	   font-family:"Arial Rounded MT Bold", "Arial Black", Arial;
	   font-size:1.2em;
	   color:white;
    }
	#header a{
		text-decoration:none;
		color:white;
	}
	#header img.menu_p{
		display:none;
		margin-right:10px;
		width:20px;
	}
	#nav{
		width:150px;
		background-color:#282522;
		float:left;
		min-height:95%;
	}
	#nav ul{
		list-style:none;
		margin:0;
		padding:0;
		background-color:#282522;
	}
	#nav ul li{
		padding:10px;
		
	}
	#nav ul li img{
		width:16px;
		vertical-align:middle;
		margin-right:5px;
	}
	#nav ul li:hover{
		background-color:#46413c;
	}
	#nav ul li a{
		text-decoration:none;
		color:white;
	}
	#nav ul li ul{
		position:absolute;
		left:150px;
		margin-top:-28px;
		display:none;
		z-index:999;
	}
	#nav ul li:hover ul{
		display:block;
	}
	
	#nav_2{
		display:none;
	}
	
	.profil{
		height:20px;
		float:right;
		margin-top:-20px;
	}
	.profil ul{
		list-style:none;
		width:150px;
	}
	.profil ul li:hover ul{
		display:block;	
	}
	.profil ul li ul{
		margin-left:13px;
		position:relative;
		display:none;
		background-color:#282522;
		list-style:none;
		padding:0;
	}
	.profil ul li ul li{
		margin:0;
		padding:10px;
	}
	.profil ul li ul li:hover{
		background-color:#46413c;
	}
	#content{
		background-color: #F8F8F8;
		float:clear;
		margin-left:150px;
		padding:20px;
		color:#415859;
	}
	#content .tmb_tambah{
		border:1px solid #e7eded;
		padding:8px;
		padding-top:6px;
		padding-bottom:4px;
		border-radius:2px 2px 2px 2px;
		font-size:14px;
		color:#415859;
		background-color:white;
	}
	#content .tmb_tambah:hover{
		background-color:#84def4;
	}
	#content a{
		text-decoration:none;
	}
	.lihat{
		border-collapse:collapse;
		border-spacing:0;
		font-family:arial;
		background-color:white;
		border:1px solid #e7eded;	
	}
	
	.lihat th{
		border-top:1px solid #e7eded;
		border-bottom:1px solid #e7eded;
		padding:10px;
	}
	.lihat td{
		padding:6px;
	}
	.lihat a{
		text-decoration:none;
		color:#415859;
	}
	.lihat a:hover{
		color:#309a78;
	}
	.lihat tr:nth-child(even){
		background-color:#e7eeee;
	}
	.lihat tr span.aksi{
		display:none;
		font-size:11px;
	}
	.lihat tr span.aksi{
		margin-top:6px;
	}
	.lihat tr:hover span.aksi{
		display:block;
	}
	
	.hid_tabelsub{
		display:none;
	}
	.tmb_cari{
		margin-top:10px;
		margin-bottom:10px;
		float:right;
	}
	
	.tmb_cari input[type=text]{
		padding:5px;
	}
	.tmb_cari input[type=submit]{
		padding:5px;
	}
	.tmb_cari select{
		padding:5px;
	}
	.tmb_all{
		margin-top:10px;
	}
	.tmb_all select{
		padding:5px;
	}
	.tmb_all input[type=submit]{
		padding:5px;
	}
	
	form > div {
		clear:both;
		margin-bottom:10px;
	}
	form > div > label{
		width:25%;
		float:left;
	}
	form > div > div > input[type=text],
	input[type=password]{
		width:350px;
		padding:3px;
		font-size:1em;
	}
	form > div > div > input[type=text].penuh{
		width:620px;
	}
	form > div > div > textarea{
		width:620px;
		height:300px;
		padding:3px;
		font-size:1em;
	}
	form > div >div > select{
		padding:3px;
		font-size:1em;
	}
	form > div input[type=submit]{
		border:1px solid #e7eded;
		padding:5px;
		padding-left:10px;
		padding-right:10px;
		border-radius:2px 2px 2px 2px;
		font-size:14px;
		font-weight:bold;
		color:#415859;
		background-color:#84def4;
		cursor:pointer;
	}
	
	form .wjb{
		font-style:italic;
		font-size:10px;
	}
	
	.error{
	  width:90%;
	  margin:5px 0px 5px 0px;
      background-color: #FFECEC;
	  padding:10px;
	 
      border: 1px solid red;
      border-left: 5px solid red;
      box-shadow: 1px 0px 3px red ;
    }
	.hal_b{
		margin-top:10px;
	}
	.hal_small{
		display:none;
	}
	.pesan{
	  width:90%;
	  margin:5px 0px 5px 0px;
      background-color: #ecffed;
	  padding:10px;
	 
      border: 1px solid green;
      border-left: 5px solid green;
      box-shadow: 1px 0px 3px green ;
    }
	.pesan a{
		font-size:0.9em;
	}
	.panah{
		border:1px solid #e7eded;
		padding:10px;
		padding-top:5px;
		padding-bottom:5px;
		background-color:white;
	}
	.panah2{
		border:1px solid #e7eded;
		padding:10px;
		padding-top:5px;
		padding-bottom:5px;
		background-color:#e5e5e5;
	}
	.panah2:hover{
		background-color:#282522;
		color:white;
	}
	#fichero{
		border:1px solid blue;
	}
    /*===Tablet Style===*/
    /*==================*/
@media only screen and (min-width: 481px) and (max-width: 900px){  
    #nav{
		width:45px;
	}
	#nav ul li img{
		width:25px;
		vertical-align:middle;
		margin-right:5px;
	}
	#nav .menu_h{
		display:none;
	}
	#nav ul li ul{
		left:45px;
	}
	#content{
		margin-left:45px;
	}
	form > div > label{
		width:100%;
		float:none;
	}
	form > div > div > input[type=text],
	input[type=password],textarea{
		width:100%;
		
	}
	form > div > div > textarea{
		width:100%;
	}
	form > div > div > input[type=text].penuh{
		width:100%;
	}
}
    /*===Smartphone Style===*/
    /*======================*/
@media only screen and (max-width: 480px){  
     #header img.menu_p{
		display:block;
	}
	 #nav{
		display:none;
	 }
	#content{
		margin-left:0px;
	}
	#nav_2{
		display:block;
		width:25px;
		background-color:#282522;
		float:left;
	}
	#nav_2 ul{
		list-style:none;
		margin:0;
		padding:0;
		background-color:#282522;
	}
	#nav_2 ul li ul{
		width:40px;
		display:none;
		position:absolute;
		
	}
	
	#nav_2 ul li ul li:hover{
		background-color:#46413c;
	}
	#nav_2 ul li ul li:hover ul li{
		display:block;
	}
	#nav_2 ul li ul li ul{
		margin-top:-30px;
		left:40px;
		width:200px;
		display:none;
	}
	#nav_2 ul li ul li ul li{
		display:none;
	}
	#nav_2 ul li:hover ul{
		display:block;
	}
	#nav_2 ul li ul li{
		padding:10px;
	}
	#nav_2 ul li ul li img{
		width:20px;
		vertical-align:middle;
		margin-right:5px;
	}	
	#nav_2 .menu_h{
		display:none;
	}
	.lihat .hid_tabel{
		display:none;
	}
	.lihat tr:hover span.hid_tabelsub{
		display:block;
	}
	.tmb_cari{
		width:100%;
		
	}
	.tmb_cari input[type=text]{
		width:95%;
	}
	.tmb_cari input[type=submit]{
		margin-top:5px;
		width:100%;
	}
	form > div > label{
		width:100%;
		float:none;
	}
	form > div > div > input[type=text],
	input[type=password],textarea{
		width:100%;
	}
	form > div > div > textarea{
		width:100%;
	}
	form > div > div > input[type=text].penuh{
		width:100%;
	}
	.hal_small{
		display:block;
		float:left;
	}
	.hal{
		display:none;
	}
	
}