html, body {
    padding: 0px;
    margin: 0px;
    height: 100%;
	background-color:#939393;
	font-family: Arial, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
    overflow: hidden;
}


div#container {
    width: 1018px;
    margin-top: 18px;
	margin-bottom: 20px;
	background-color:#FFFFFF;
	box-shadow: 0px 0px 10px 0px #000000;
}


div#subcontainer {
    width: 901px;
    margin-top: 20px;
	margin-bottom: 20px;
	background-color:#FFFFFF;
	box-shadow: 0px 0px 10px 0px #000000;
}

div#subcontainerm {
    width: device-width;
	background-color:#FFFFFF;

}


div#header {
    width:1018px;
	
}


div#subheader {
    width:860px;
	
}

div#subheaderm {
  width: device-width;	
}

div#body {
    overflow: hidden;
    width: 1018px;
}


div#subbody {
    overflow: hidden;
    width: 901px;
}

div#subbodym {
    overflow: hidden;
    width: device-width;
	padding:10px;
}


#tabelkalender {
	border-collapse:collapse;
}
#tabelkalender td {
	border: 1px solid #ccc;
}

#tabelkosong {
	border-collapse:collapse;
}
#tabelkosong td {
	border: 0px solid #ddd;
}

.hari {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #333333;
	background-color:#F2F2F2;
	text-align: center;
	font-weight:700;
	line-height:150%;
}


.inputtanggal {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #333333;
	font-weight:400;
	border:1px solid #ccc;
	height:auto;
}


.haribig {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #333333;
	background-color:#F2F2F2;
	text-align: center;
	font-weight:700;
	line-height:150%;
}

.harired {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #FF3333;
	background-color:#F2F2F2;
	text-align: center;
	font-weight:700;
	line-height:150%;
}

.haribigred {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #FF3333;
	background-color:#F2F2F2;
	text-align: center;
	font-weight:700;
	line-height:150%;
}

.judulkalenderleft {
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-size: 30px;
	color: #000000;
	font-weight:700
}


.judulkalenderright {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #FF3333;
	font-weight: 700;
}



.bodikalender {
	font-family:"Times New Roman";
	font-size: 45px;
	font-weight:700;
	color: #000000;
	background-color:#FFFFFF;
	text-align: center;
}

.bodikalender a:link {color:#000000; text-decoration: none}
.bodikalender a:visited {color:#000000;text-decoration: none}
.bodikalender a:active {color:#000000;text-decoration: none}
.bodikalender a:hover {color:#000000;text-decoration: none}

.takaktif {
	font-family:"Times New Roman";
	font-size: 45px;
	font-weight:700;
	color:#CCCCCC;
	text-align: center;
}

.takaktif a:link {color: #CCCCCC; text-decoration: none}
.takaktif a:visited {color:#CCCCCC;text-decoration: none}
.takaktif a:active {color:#CCCCCC;text-decoration: none}
.takaktif a:hover {color:#CCCCCC;text-decoration: none}

.aktif {
	font-family:"Times New Roman";
	font-size: 45px;
	font-weight:700;
	color: #000000;
	text-align: center;
}

.aktif a:link {color: #000000; text-decoration: none}
.aktif a:visited {color:#000000;text-decoration: none}
.aktif a:active {color:#000000;text-decoration: none}
.aktif a:hover {color:#000000;text-decoration: none}

.libur {
	font-family:"Times New Roman";
	font-size: 45px;
	font-weight:700;
	color:#FF0000;
	background-color:#FFFFFF;
	text-decoration: none;
	text-align: center;    
}

.libur a:link {color: #FF0000; text-decoration: none}
.libur a:visited {color:#FF0000;text-decoration: none}
.libur a:active {color:#FF0000;text-decoration: none}
.libur a:hover {color:#FF0000;text-decoration: none}


.liburtakaktif {
	font-family:"Times New Roman";
	font-size: 45px;
	font-weight:700;
	color:#FFCCCC;
	background-color:#FFFFFF;
	text-decoration: none;
	text-align: center;    
}

.liburtakaktif a:link {color: #FFCCCC; text-decoration: none}
.liburtakaktif a:visited {color:#FFCCCC;text-decoration: none}
.liburtakaktif a:active {color:#FFCCCC;text-decoration: none}
.liburtakaktif a:hover {color:#FFCCCC;text-decoration: none}

.judulingkel {
	font-family: "Trebuchet MS";
	font-size: 14px;
	color: #000000;
	background-color:#F2F2F2;
	text-align: center;
	font-weight:700;
}
.wuku {
	font-family: "Trebuchet MS";
	font-size: 13px;
	color: #000000;
	background-color:#F2F2F2;
	text-align: center;
	font-weight:700;
	padding-bottom:10px
}

.wuku a:link {color: #000000; text-decoration: none}
.wuku a:visited {color:#000000;text-decoration: none}
.wuku a:active {color:#000000;text-decoration: none}
.wuku a:hover {color:#FF0000;text-decoration: none}

.wukured {
	font-family: "Trebuchet MS";
	font-size: 13px;
	color: #FF0000;
	background-color:#F2F2F2;
	text-align: center;
	font-weight:700;
	padding-top:10px;
}

.wukured a:link {color: #FF0000; text-decoration: none}
.wukured a:visited {color:#FF0000;text-decoration: none}
.wukured a:active {color:#FF0000;text-decoration: none}
.wukured a:hover {color:#000000;text-decoration: none}


.wewaran {

	font-family: "Trebuchet MS";
	font-size: 11px;
	color: #FFFFFF;
	background-color:#073A61;
	text-align: center;
}

.wewaran a:link {color: #FFFFFF; text-decoration: none}
.wewaran a:visited {color:#FFFFFF;text-decoration: none}
.wewaran a:active {color:#FFFFFF;text-decoration: none}
.wewaran a:hover {color:#FFFFFF;text-decoration: none}

.rerainan {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFF00;
	background-color: #000099;
	text-align: center;
	text-decoration: none;
	font-weight: normal;
}

.rerainan a:link {color: #FFFF00; text-decoration: none}
.rerainan a:visited {color:#FFFF00;text-decoration: none}
.rerainan a:active {color:#FFFF00;text-decoration: none}
.rerainan a:hover {color:#FFFF00;text-decoration: none}

.ingkel {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FF3333;
	background-color:#F2F2F2;
	text-align: center;
	font-weight:600;
}

.ingkel a:link {color: #FF0000; text-decoration: none}
.ingkel a:visited {color:#FF0000;text-decoration: none}
.ingkel a:active {color:#FF0000;text-decoration: none}
.ingkel a:hover {color:#FF0000;text-decoration: none}

.liburaktif {
	font-family:"Times New Roman";
	font-size: 45px;
	font-weight:700;
	color: #FF0000;
	text-align: center;
}

.liburaktif a:link {color: #FF0000; text-decoration: none}
.liburaktif a:visited {color:#FF0000;text-decoration: none}
.liburaktif a:active {color:#FF0000;text-decoration: none}
.liburaktif a:hover {color:#FF0000;text-decoration: none}

.judulwuku {
	font-family: "Trebuchet MS";
	font-size: 14px;
	color: #000000;
	background-color:#F2F2F2;
	text-align: center;
	font-weight:700;
}
.daftar {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#000099;
	background-color:#FFFFFF;
	text-align: left;
	font-weight:normal;
	line-height:14pt
}
.juduldaftar {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	background-color: #073A61;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
}
.juduldaftar a:link {color: #FFFFFF; text-decoration: none}
.juduldaftar a:visited {color:#FFFFFF;text-decoration: none}
.juduldaftar a:active {color:#FFFFFF;text-decoration: none}
.juduldaftar a:hover {color:#FFFFFF;text-decoration: none}



.copyright {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #000000;
}

.copyright a:link {color: #000000; text-decoration: none}
.copyright a:visited {color:#000000;text-decoration: none}
.copyright a:active {color:#000000;text-decoration: none}
.copyright a:hover {color:#000000;text-decoration: none}

.isidaftar {
	background-color: #EBEBE4;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000099;
	
}

.warastandarjudul {
	font-family:Calibri;
	font-size: 11px;
	color: #000000;
	font-weight:550;
	line-height:9pt;
	padding-top:8px;
	padding-bottom:5px;

}

.warastandarjudul a:link {color: #000000; text-decoration: none}
.warastandarjudul a:visited {color:#000000;text-decoration: none}
.warastandarjudul a:active {color:#000000;text-decoration: none}
.warastandarjudul a:hover {color:#FF0000;text-decoration: none}

.warastandar {
	font-family:Calibri;
	font-size: 10px;
	color: #000000;
	font-weight:550;
	line-height:8pt;
	padding-top:3px;
	padding-bottom:3px;

}

.warastandar a:link {color: #000000; text-decoration: none}
.warastandar a:visited {color:#000000;text-decoration: none}
.warastandar a:active {color:#000000;text-decoration: none}
.warastandar a:hover {color:#FF0000;text-decoration: none}


.warastandarbiger {
	font-family:Calibri;
	font-size: 14px;
	color: #000000;
	font-weight:600;
}

.warastandarbiger a:link {color: #000000; text-decoration: none}
.warastandarbiger a:visited {color:#000000;text-decoration: none}
.warastandarbiger a:active {color:#000000;text-decoration: none}
.warastandarbiger a:hover {color:#FF0000;text-decoration: none}


.warastandartakaktif {
	font-family:Calibri;
	font-size: 10px;
	font-weight:550;
	color: #CCCCCC;
}

.warastandartakaktif a:link {color: #CCCCCC; text-decoration: none}
.warastandartakaktif a:visited {color:#CCCCCC;text-decoration: none}
.warastandartakaktif a:active {color:#CCCCCC;text-decoration: none}
.warastandartakaktif a:hover {color:#FFCCCC;text-decoration: none}

.warastandarbigertakaktif {
	font-family:Calibri;
	font-size: 14px;
	color: #CCCCCC;
	font-weight:600;
}

.warastandarbigertakaktif a:link {color: #CCCCCC; text-decoration: none}
.warastandarbigertakaktif a:visited {color:#CCCCCC;text-decoration: none}
.warastandarbigertakaktif a:active {color:#CCCCCC;text-decoration: none}
.warastandarbigertakaktif a:hover {color:#FFCCCC;text-decoration: none}


.waralist {
	font-family:Calibri;
	font-size: 11px;
	color: #000000;
	font-weight:550;
	line-height:9pt;
}

.waralist a:link {color: #000000; text-decoration: none}
.waralist a:visited {color:#000000;text-decoration: none}
.waralist a:active {color:#000000;text-decoration: none}
.waralist a:hover {color:#FF0000;text-decoration: none;}


.judul {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18pt;
	color: #333333;
	background-color: #F2F2F2;
	text-align: center;
	font-weight:600;
	vertical-align: middle;
}



div#right-sidebar {
    overflow: hidden;
    width: 540px;
    float: left;
	background-color:#FFFFFF;
    padding: 0px;

}


div#left-sidebar {
    width: 300px;
    float: left;
	background-color:#FFFFFF;
    overflow: hidden;

}

.foresmall {
	font-family: Helvetica, Arial;
	color: #333333;
	font-weight:normal;
	font-size:16px;
	line-height:150%;
}

.foresmall a:link {color:#0072C6; text-decoration: none}
.foresmall a:visited {color:#0072C6;text-decoration: none}
.foresmall a:active {color:#0072C6;text-decoration: none}
.foresmall a:hover {color:#0072C6;text-decoration:underline; font-weight:bold}

.foresmall1 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #333333;
	font-weight:normal;
	font-size:14px;
	line-height:150%;
}

.foresmall1 a:link {color:#0072C6; text-decoration: none}
.foresmall1 a:visited {color:#0072C6;text-decoration: none}
.foresmall1 a:active {color:#0072C6;text-decoration: none}
.foresmall1 a:hover {color:#0072C6;text-decoration: none}

.foresmall2 {
	font-family: Helvetica, Arial;
	color: #0072C6;
	font-weight:normal;
	font-size:16px;
	line-height:150%;
}

.foresmall2 a:link {color:#0072C6; text-decoration: underline}
.foresmall2 a:visited {color:#0072C6;text-decoration: underline}
.foresmall2 a:active {color:#0072C6;text-decoration: underline}
.foresmall2 a:hover {color:#0072C6;text-decoration: underline}



.kbknormal {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}

.kbkhari {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color:F2F2F2;


}
.kbkjudulkalender {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	font-weight: bold;
}


.kbkbodikalender {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color:FFFFFF;
	text-align: center;
}

.kbkbodikalender a:link {color:#000000; text-decoration: none}
.kbkbodikalender a:visited {color:#000000;text-decoration: none}
.kbkbodikalender a:active {color:#000000;text-decoration: none}
.kbkbodikalender a:hover {color:#000000;text-decoration: none}

.kbktakaktif {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#CCCCCC;
	background-color:#FFFFFF;
	text-align: center;
}

.kbktakaktif a:link {color: #CCCCCC; text-decoration: none}
.kbktakaktif a:visited {color:#CCCCCC;text-decoration: none}
.kbktakaktif a:active {color:#CCCCCC;text-decoration: none}
.kbktakaktif a:hover {color:#CCCCCC;text-decoration: none}

.kbkaktif {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #FFFFBB;
	text-align: center;
}

.kbkaktif a:link {color: #000000; text-decoration: none}
.kbkaktif a:visited {color:#000000;text-decoration: none}
.kbkaktif a:active {color:#000000;text-decoration: none}
.kbkaktif a:hover {color:#000000;text-decoration: none}

.kbklibur {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#FF0000;
	background-color:#FFFFFF;
	text-align: center;    
}

.kbklibur a:link {color: #FF0000; text-decoration: none}
.kbklibur a:visited {color:#FF0000;text-decoration: none}
.kbklibur a:active {color:#FF0000;text-decoration: none}
.kbklibur a:hover {color:#FF0000;text-decoration: none}


.kbkliburaktif {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF0000;
	background-color: #FFFFBB;
	text-align: center;
}

.kbkliburaktif a:link {color: #FF0000; text-decoration: none}
.kbkliburaktif a:visited {color:#FF0000;text-decoration: none}
.kbkliburaktif a:active {color:#FF0000;text-decoration: none}
.kbkliburaktif a:hover {color:#FF0000;text-decoration: none}


       /* Container menu */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* Tombol dropdown */
        .dropbtn {
            background-color: #F2F2F2;
            color: black;
            padding: 6px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* Isi dropdown */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 200px;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        /* Link di dalam dropdown */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* Efek hover pada link */
        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        /* Tampilkan dropdown saat hover */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* Efek hover pada tombol */
        .dropdown:hover .dropbtn {
            background-color: black;
			color:whitesmoke;
       }