/* @import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
@import url(//fonts.googleapis.com/css?family=Kaushan+Script); */

@import url(fonts_source_sans_pro.css);
@import url(fonts_kaushan_script.css);

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img {
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}

a, div, span, a:hover{
    text-decoration: none;
    /* font-size:12px; */
}
.clr{
    clear: both;
}

html, body {
    overflow-x: hidden!important;
    font-family: 'Source Sans Pro', sans-serif;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    background: #f9f9f9;
    font-size: 14px;
    background-image: url(../img/pattern/pat_03.png), url(../img/login-bg.jpg);
    background-repeat: repeat, no-repeat;
    background-position:0 0;
    background-size:5px 5px, cover;
    background-attachment: fixed;
}
#main_cont{
    background:rgba(255,255,255,0.3);
    padding:20px;
    /*position: absolute;
    left: 0;
    right: 0;*/
}
.company-pattern{background:#0052A2 url(../img/pattern/pat_04.png) repeat !important;}
#main{background:#eeeeee;}
.well {
    background:#fff;
    background:rgba(255, 255, 255, 0.95);
    padding:20px;
}

@-webkit-keyframes slideOut{
    0%{top:-30px; opacity: 0;}
    100%{top:0px; opacity: 1;}
}
@-moz-keyframes slideOut{
    0%{top:-30px; opacity: 0;}
    100%{top:0px; opacity: 1;}
}
@-o-keyframes slideOut{
    0%{top:-30px; opacity: 0;}
    100%{top:0px; opacity: 1;}
}
@-ms-keyframes slideOut{
    0%{top:-30px; opacity: 0;}
    100%{top:0px; opacity: 1;}
}
@keyframes slideOut{
    0%{top:-30px; opacity: 0;}
    100%{top:0px; opacity: 1;}
}
h1.main_title, .content h2{
    font-size: 22px;
    color:#333 /*--color id 01--*/ ;
    padding:0px;
    margin:0px;
    padding-bottom:20px;
}
#header{
    float:left;
    padding:20px;
    background:#f9f9f9;
    min-height:360px;
}
#navigation {
    display:block;
    list-style:none;
}
#navigation li, #navigation li.active{
    display:inline;
    height:160px;
    color:#fff;
    border-right: #F9F9F9 10px solid;
    border-bottom: #F9F9F9 10px solid;
    padding:0;
    cursor:pointer;
}
#navigation li.active > .inner{
    background:rgba(0,0,0,0.3) !important;
    min-height: 80px;
}
.small-box-footer {
    position: absolute;
    text-align: center;
    padding: 3px 0;
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    font-size: 14px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.1);
    text-decoration: none;
    bottom:0;
    width: 100%;
}
a.small-box-footer {text-decoration:none;}
.small-box-footer:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.15);
}
#navigation li{
    background: #B0B0B0;
}
#navigation li:hover{
    background: #849696;
}
#navigation li  a:hover{color:#fff;}
#navigation li.admin {
    background: #849696;
}
#navigation li.admin:hover{
    background:#313838;
}
#navigation li.siakad, #navigation li.akad {
    background:#2849b5;
}
#navigation li.siakad:hover,#navigation li.akad:hover{
    background:#1F3A93;
}
#navigation li.aset {
    background:#39cccc;
}
#navigation li.aset:hover{
    background:#2BA7A7;
}
#navigation li.sdm {
    background:#F56954;
}
#navigation li.sdm:hover{
    background:#F33F24;
}
#navigation li.keuangan {
    background:#00A65A;
}
#navigation li.keuangan:hover{
    background:#00743E;
}
#navigation li.keuakad,#navigation li.h2h,#navigation li.keu {
    background:#00A65A;
}
#navigation li.keuakad:hover, #navigation li.h2h:hover, #navigation li.keu:hover{
    background:#05874B;
}
#navigation li.dashboard {
    background:#14B7D9;
}
#navigation li.dashboard:hover{
    background:#128AC2;
}
#navigation li.pdpt {
    background:url(../images/icon/pdpt_small.png) no-repeat left 8px;
}
#navigation li.pdpt:hover{
    background:#0098BD;
}
#navigation li.pmb {
    background:#F39C12;
}
#navigation li.pmb:hover{
    background:#CF8613;
}
#navigation li.spmb {
    background:#F39C12;
}
#navigation li.spmb:hover{
    background:#CF8613;
}
#navigation li.helpdesk {
    background:#85144b;
}
#navigation li.helpdesk:hover{
    background:#590E32;
}

#navigation li.alumni, #navigation li.cac {
    background:#932ab6;
}
#navigation li.alumni:hover, #navigation li.cac:hover {
    background:#71208C;
}

#navigation li.kemahasiswaan {
    background:#5FDCA9;
}
#navigation li.kemahasiswaan:hover {
    background:#0FB290;
}

#navigation li .inner{padding:10px;}
.content{
    float:left;
    padding-bottom: 10px;
    width:100%;
    height:auto;
}
#navigation li > .icon {
    position: absolute;
    top: auto;
    bottom: 5px;
    right: 5px;
    z-index: 0;
    font-size:90px;
    color: rgba(0, 0, 0, 0.15);
}
.content div#img_admin{
    background:url(../images/icon/admin.png) no-repeat center center;
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content div#img_siakad, .content div#img_akad{
    background:url(../images/icon/akad.png) no-repeat center center;
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content div#img_sdm{
    background:url(../images/icon/peg.png) no-repeat center center;
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content div#img_pdpt{
    background:url(../images/icon/pdpt.png) no-repeat center center;
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content div#img_pmb, .content div#img_spmb{
    background:url(../images/icon/pmb.png) no-repeat center center;
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content div#img_profil{
    background:url(../images/icon/profil.png) no-repeat center center;
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content div#img_password{
    background:url(../images/icon/password.png) no-repeat center center;
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content div#img_keu, .content div#img_h2h, .content div#img_kemhs{
    background:url(../images/icon/keu.png) no-repeat center center;
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content div#img_sdm{
    background:url(../images/icon/peg.png) no-repeat center center;
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content div#img_alum{
    background:url(../images/icon/ucc.png) no-repeat center center;
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content div#img_aset{
    background:url(../images/icon/aset.png) no-repeat center center;
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content div#img_perpus{
    background:url(../images/icon/perpus.png) no-repeat center center;
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content div#img_profil{
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content div#img_password{
    width:32px;
    height:32px;
    padding-top:25px;
    margin-right:15px;
}
.content h2{
    float:left;
    padding: 20px;
    /* padding-left: 20px; */
}
.content span.role_container:hover span {
    /* color:#015593 /*--color id 01--*/ ;
}
.panel{
    float:left;
    width: 100%;
    padding: 0;
    background:#eee;
    box-shadow:none;
    border: none;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: -150%;
    opacity: 0;
    -webkit-transition: opacity .6s ease-in-out;
    -moz-transition: opacity .6s ease-in-out;
    -o-transition: opacity .6s ease-in-out;
    -ms-transition: opacity .6s ease-in-out;
    transition: opacity .6s ease-in-out;
}
.panel:target{
    opacity: 1;
    margin-top: 0%;
}
.title-name{
    background:#01740B;
    padding:10px 20px;
    cursor:pointer;
}
.link-right{
    margin-top:10px;
}
.link-right a{
    padding:5px 10px;
    background:rgba(0,0,0,0.2);
}
.link-right a:hover{
    color:#fff;
    text-decoration:none;
    background:rgba(0,0,0,0.4);
}
.role_box{
    padding: 20px;
    background: #fff /*url(../img/right_arrow.png)*/ no-repeat;
    background-position:right 20px center ;
    border-bottom: 1px solid #ddd;
    /* border-radius:4px; */
    float:left;
    width: 100%;
    color: #999;
    line-height: 1;
    cursor:pointer;
    transition:0.5s;
}
.role_box:hover{
    background:#0052A2;
    color:#fff;
}
.role_box:hover span.rolename{
    color:#fff;
}
span.role_container{
    padding:5px 0px;
    /* border-bottom:1px solid #ccc; */
    cursor:pointer;
}
/* span.role_container:last-child{
        border:none;
} */
table.role_container td{
    padding:5px 0px;
}
span.rolename{
    font-weight:bold;
    color: #0052A2/*--color id 03--*/;
}
#admin:target ~ #header #navigation #link-admin,
#akad:target ~ #header #navigation #link-akad,
#profil:target ~ #header #navigation #link-profil,
#out:target ~ #header #navigation #link-out{
    background: #000;
    color: #fff;
}
#bottom{
    float:left;
    position:relative;

}
#bottom span{
    float:left;
    margin-right:15px;
    padding-left:20px;
    cursor:pointer;
}
#bottom span:hover {
    text-decoration:underline;
    color:red;
}
#bottom span.profil{
    background:url(../img/icon/profil_small.png) no-repeat left center;
}
#bottom span.password{
    background:url(../img/icon/password_small.png) no-repeat left center;
}
#bottom span.out{
    background:url(../img/icon/out_small.png) no-repeat left center;
}

.error{
    color:red;
}
.success{
    color:green;
}

.logo-menus{height:auto; max-height:125px; overflow:hidden; width:100%; margin:0; padding:0; background:'../img/corner.png'}
div.img-menus{height:100px; max-height:100px !important; overflow:hidden; width:50%; background:#FFF;}
.logo-menu .img-menus img {margin:0; padding:0;}

/*---------Elemen Bawah-------*/
.login-bottom{
    background:url(../img/elba/elba_03.png) top no-repeat; display:block; height:35px; position:relative;
    margin:0 auto;
    padding:0 auto;
}
/*-----*/
/*---------color id------------*/
/*---color id 01 #015593---*/
/*---color id 02 #ffcc2a---*/
/*---color id 03 #20915E---*/
/*---color id 01A #015C9B---*/
/*---color id 03A #48ac7f---*/
/*--coloring--*/
a{text-decoration:none; color:#fff; font-size:18px; /*--color id 02--*/ ;}
.teks-colorid01 {color:#0052A2 /*--color id 01--*/ ;}
.teks-colorid02 {color:#ffcc2a /*--color id 02--*/ ;}
.teks-colorid03 {color:#20915E /*--color id 03--*/ ;}
.teks-colorid04 {color:#015C9B /*--color id 01A--*/ ;}
.teks-white {color:#FFF;}

.margin-up10px{margin-top:10px;}
.margin-up20px{margin-top:20px;}
.margin-up30px{margin-top:30px;}

.background-01{background:#015593;}

.border-bottom-dotted{height:3px; padding-top:5px;  border-bottom:1px dotted #CCC; width:90%; left:0px;}

.title-name img{
    float: left;
    height: 50px;
}

.title-name .company-name{
    display: inline-block;
}

.title-name .company-name h1{
    text-transform: uppercase;
    font-size: 24px;
    font-weight: bold;
    color: white;
}
.title-name .company-name h2{
    text-transform: uppercase;
    font-size: 18px;
    /*font-weight: bold;*/
    color: white;
    /*font-style: italic;*/
}
.title-name .link-right{
    float: right;
}


/* ==========================================================*/
/* =================== RESPONSIVE SETTING ===================*/
/* ==========================================================*/
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) {
    #main_cont{padding:0px !important;}
    .title{display:none;}
    .title-name .link-right{
        float: none;
    }
}

@media (max-width: 546px) {
    .title-name img{
        float: none;
        height: 120px;
    }
    .title-name, .title-name .company-name{
        text-align: center;
    }
}