body {
color:#000;
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial;
  overflow-x: hidden;
}

@font-face {
  font-family: 'Open Sans';
  src:  url('../font/OpenSans-Regular.ttf');
  font-family: 'Ubuntu';
  src:  url('../font/Ubuntu-Regular.ttf');
}

img {border:none;}
a{text-decoration:none;color:#045b88;}

/* Login */
#login {
width:100%;
height:100%;
max-height:100%;
	display: table;
	margin-left: auto;
	margin-right: auto;
text-align:center;
}

#login-vertical{
	vertical-align: middle;
	display:table-cell;
}

#login-content{
	width:300px;
	padding:10px;
	background-color:white;
	border:2px solid lightgrey;
	border-radius:10px;
	margin-left:auto;
	margin-right:auto;
	box-shadow: 5px 7px #888888;
}

#login-form input{
width:100%;	
}

#login-logo{
width:100%;
margin-bottom:5px;
}

#login-logo img{
max-width:200px;
max-height:80px;
}


#login-username{
 width: 100%;
    height: 42px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-size: 14px;
    padding: 0 10px 0 50px;
    outline: none;
background: #fff url('../../md/images/username.png') 20px top no-repeat;
background-size: 16px 80px;	
font-family:Ubuntu;
}
#login-username:focus{
background: #fff url('../../md/images/username.png') 20px bottom no-repeat;
background-size: 16px 80px;	
border: 1px solid #088620;
}

#login-password{
 width: 100%;
    height: 42px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-size: 14px;
    padding: 0 10px 0 50px;
    outline: none;
background: #fff url('../../md/images/password.png') 20px top no-repeat;
background-size: 16px 80px;	
font-family:Ubuntu;
}

#login-password:focus{
background: #fff url('../../md/images/password.png') 20px bottom no-repeat;
background-size: 16px 80px;	
border: 1px solid #088620;
}

#login-submit{
    width: 100%;
    padding: 10px;
    background: #088620;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ccc;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    font-family: arial;
    outline: none;
    cursor: pointer;
	opacity: 0.8;
    filter: alpha(opacity=80);
}

#login-submit:hover{
opacity: 1;
filter: alpha(opacity=100);
}

#login-footer{
width:100%;
font-size:11px;
text-transform: lowercase;
margin-top:5px;
margin-bottom:5px;
font-family:Ubuntu;
}

/* Base */


#rangka {
width:100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  background-color:#1a2226;
}

/* Header */
#logo{
	width:17%;
	padding:1%;
  height: 3%;
  background-color:#045b88;
  display: block;
  float: left;
  overflow:hidden;
text-align:center;
}
#logo img{
max-width:100%;
max-height:25px;
text-decoration:none;	
}
#logo a img{
border:none;	
}
#header{
	width:79%;
	padding:1%;
  height: 3%;
  background-color:#047ebd;
  display: block;
  float: left;
  overflow:hidden;
}

#userinfo{
	color:#fff;
	float:right;
	font-size:15px;
}

#userinfo a{
	color:orange;
}

#userinfo a:hover{
color:red;
text-decoration:underline;
}

/* menu */
#menu{
height:auto;
margin-top:10px;
float:left;
width:100%;
overflow-x:hidden;
background-color:#222d32;
}

ul.menu-horizontal {
list-style:none;
margin-top:-5px;	
margin-left:-15%;
text-align:left;

}

ul.menu-horizontal li{
margin-top:5px;
float:left;
width:100%;
}

ul.menu-horizontal li a{
color:#b8c7ce;
font-family:Ubuntu;
display: block;
padding:5px 0px 5px 20px;
}

ul.menu-horizontal li a:hover {
color:#fff;
background-color:#1a2226;
}

ul.menu-horizontal li span{
margin-left:5px;
width:100%;
}

ul.menu-horizontal li a.active {
    border-left:3px #045b88 solid;
	color:#fff;
	background-color:#1a2226;
    }
	
ul.submenu {
list-style:none;	
margin-left:-5%;
text-align:left;
display:none;
}

ul.submenu li a.active {
    border-left:3px #045b88 solid;
	color:#fff;
	background-color:#1a2226;
    }

/* Content */

#sidebar{
	width:19%;
	height:88%;
	max-height:auto;
	padding-top:1%;
	padding-bottom:1%;
  background-color:#1a2226;
  display: block;
  float: left;
  overflow-x: hidden;
text-align:center;
}
#content{
	width:79%;
	padding:1%;
	max-height:auto;
	height:81%;
  background-color:#ecf0f5;
  display: block;
  float: left;
  overflow-x: hidden;
}
#footer{
	float: left;
width:79%;
height:2%;
padding:1%;
border-top:1px solid grey;
background-color:#fff;
color:#575757;
font-size:12px;
font-family:Ubuntu;
}

#footer a:hover{
color:#ff3701;
text-decoration:underline;
}
#upperleft{
text-align:left; 
width:50%;
float:left;
margin-bottom:10px;
}

#upperright{
text-align:right; 
width:50%;
float:left;
margin-bottom:10px;
}

#katakunci {
width:50%;	
float:left;
}

.buttonadd{
width:50%;
height:30px;
float:right;
cursor:pointer;
color:blue;
}
.buttonsearch{
width:30%;
height:30px;
margin-left:10px;
cursor:pointer;
color:blue;
}
.buttonsubmit{
width:50%;
padding:10px;
float:left;
cursor:pointer;
color:blue;
}

.tabledata{
width:100%;
font-size:14px;
}

/* FORM */
.textinput{
padding:5px;
height:30px;
}

.textareainput{
padding:5px;
}

.tabledata tr td a:hover{
	color:red;
}

.dropdown{
height:35px;
border: 1px solid #c0c0c0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 5px;
border-bottom: 1px #35445b solid;
padding-left: 5px;
}

.width50{
	width:50%;
}

.width100{
	width:100%;
}


/* HOME */
#homewidgettop1{
width:28.2%;	
padding:15px;
background-color:#00c0ef;
height:85px;
float:left;
margin-left:1.5%;
margin-top:0px;
color:white;
background-image:url(../../md/images/widgethome-1.png);
background-repeat: no-repeat;
background-position: right;
background-size: 35%;
}

#homewidgettop2{
width:28.2%;	
padding:15px;
background-color:#00a65a;
height:85px;
float:left;
margin-left:2.2%;
margin-top:0px;
color:white;
background-image:url(../../md/images/widgethome-2.png);
background-repeat: no-repeat;
background-position: right;
background-size: 35%;
}

#homewidgettop3{
width:28.2%;	
padding:15px;
background-color:#f39c12;
height:85px;
float:left;
margin-left:2.2%;
margin-top:0px;
color:white;
background-image:url(../../md/images/widgethome-3.png);
background-repeat: no-repeat;
background-position: right;
background-size: 35%;
}

#homewidgettop1 h1,#homewidgettop2 h1,#homewidgettop3 h1{
font-size:30px;
margin-top:-5px;
margin-bottom:15px;
}


.widgettitle{
width:100%;
float:left;
margin-top:-15px;
margin-bottom:2px;
font-size:16px;
}

.widgetbutton{
width:100%;
float:left;
margin-top:15px;
margin-bottom:5px;
color:rgba(255,255,255,0.8);
background: rgba(0,0,0,0.1);
padding:2px;
text-align:center;
}

.widgetbutton:hover {
color:white;
background: rgba(0,0,0,0.2);	
}

#homewidgetmiddle1{
width:94.8%;	
padding:15px;
background-color:#f39c12;
min-height:250px;
float:left;
margin-left:1.5%;
margin-top:15px;
font-size:10px;
}

#homewidgetmiddle2{
width:45.2%;	
padding:15px;
background-color:#f39c12;
min-height:250px;
float:left;
margin-left:1.7%;
margin-top:15px;

}

#homewidgetmiddle1 h1,#homewidgetmiddle2 h1,#homewidgetmiddle3 h1{
font-size:16px;
margin-top:-5px;
margin-bottom:5px;
color:white;
background: rgba(0,0,0,0.2);
padding:5px;
}

#homewidgetmiddle3{
width:93%;	
padding:15px;
background-color:#f39c12;
height:280px;
float:left;
margin-left:1.7%;
margin-top:15px;

}

/* Transaksi */
#upper{
width:48%;
height:auto;
margin-left:1%;
float:left;	
}

#threecol{
width:32%;
height:auto;
margin-left:1%;
float:left;	
/*background-color:yellow;*/
}

#transfull{
float:left;	
width:99%;
min-height:100px;
height:auto;
margin-left:1%;
margin-top:5px;
margin-bottom:5px;
/*background-color:green;*/
}

#buttoninput {
	width:100%;
	margin-left:0px;
	float:left;
	padding:7px;
	background-color:brown;
	color:white;
	cursor:pointer;
	text-align:center;
}

/* No Halaman */
#pagenav {
width:100%;
float:left;
margin-top:20px;
margin-bottom:20px;
text-align:center;
}

#pagenav  li{
list-style:none;
display:inline;
margin-right:5px;
}

#pagenav  li a:hover{
color:blue;
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-width : 480px) {
	#logo{
		width:98%;
		height:80px;
		padding-top:10px;
		padding-bottom:10px;
	}
	#logo img{
		max-height:80px;
	}
	#header{
		width:98%;
		padding-top:5px;
		padding-bottom:5px;
		text-align:center;
	}
	#userinfo{
		width:100%;
		text-align:center;
	}
	#sidebar{
		width:100%;
		height:auto;
		padding-top:5px;
		padding-bottom:10px;
	}
	#content{
		width:98%;
		height:auto;
		padding-top:10px;
		padding-bottom:10px;
	}
	#footer{
		width:98%;
		padding-top:10px;
		padding-bottom:10px;
		text-align:center;
	}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {


}