body {
    background-image:  url(../images/background.jpeg);
    background-size:   cover;                      
    background-repeat: no-repeat;
    background-position: center center;           
}



.clear{clear:both;

}
.header {
    display: flex; /* Gunakan flexbox untuk tata letak */
    align-items: center; /* Vertikal sejajar dengan konten */
    justify-content: space-between; /* Sesuaikan isi jika ada elemen tambahan */
    width: 100%;
    background: #2f5abb;
    color: white;
    background-image: linear-gradient(to bottom, #8cabf1, #2f5abb); /* Gabungan standar */
    padding: 10px; /* Tambahkan padding untuk ruang dalam */
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar elemen */
}

.headerleft {
    padding: 10px;
    width: auto; /* Biarkan ukurannya menyesuaikan konten */
    height: auto; /* Tinggi otomatis mengikuti isi */
    box-sizing: border-box; /* Tambahkan ini agar padding dihitung dalam ukuran */
}

/* Contoh untuk responsif */
@media screen and (max-width: 768px) {
    .header {
        flex-direction: column; /* Ubah menjadi kolom pada layar kecil */
        text-align: center; /* Pusatkan konten */
    }

    .headerleft {
        width: 100%; /* Isi seluruh lebar layar */
    }
}
.menu{padding:7px;
}

.headerright{float:left;padding:10px;margin-top:10px;width: 60%;height: auto;font-size:30px; font: bold 20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}

.garis{clear:both;width:100%;background-color:#009900;color:black;font-family:Geneva, Arial, Helvetica, sans-serif;font-size:12px;background-color:white;border-bottom: solid #CCCCCC;border-top: solid ;}.judul{padding:7px 0px 7px 2px;clear:both;height:auto;background-color:white;color:black;font-family: sans-serif;font-size:13px;border-bottom: solid #999999;background-image: -moz-linear-gradient(top,#ebebeb,#fff);background-image: -webkit-gradient(linear,left top,left bottom,from(#ebebeb),to(#fff) );}.pencarian{padding:1px;clear:both;height:50px;font-family:Geneva, Arial, Helvetica, sans-serif;font-size:12px;}.isi{font-size:13px; font: 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; background:white;}.isidaftar{font-size:13px; font: 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; background:#f5f5f5;border-radius: 30px 30px 4px 4px; -moz-border-radius: 30px 30px 4px 4px; -webkit-border-radius: 30px 30px 4px 4px;}.cari{padding:7px;height:inherit;background:#2f5abb;background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) );}.carikolom{background:white;padding:4px;width:inherit;border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px;}.search-image{border:0;vertical-align:top;float:right;margin:6px 4px 0 2px}.adminpost{width:100%;float:left;}.adminpostleft{float:left;padding:5px;background-image: -moz-linear-gradient(top,#fff,#ccc);background-image: -webkit-linear-gradient(top,#fff,#ccc);background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#ccc) );width:45%;}.adminpostright{width:15%;float:left;padding:5px;background-image: -moz-linear-gradient(top,#fff,#ccc);background-image: -webkit-linear-gradient(top,#fff,#ccc);background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#ccc) );}.adminpostrightright{padding:5px;background-image: -moz-linear-gradient(top,#fff,#ccc);background-image: -webkit-linear-gradient(top,#fff,#ccc);background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#ccc) );width:5%;float:left;}.adminpostrightright2{padding:5px;background-image: -moz-linear-gradient(top,#fff,#ccc);background-image: -webkit-linear-gradient(top,#fff,#ccc);background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#ccc) );width:10%;float:left;}.adminpostrightright3{margin-left:20%;float:left;}.pagenumber{float:left;width:100%;}.pagenumbermininetral{float:left;padding:4px;}.pagenumbermini{margin-left:3px;padding:4px;float:left;}a.pagenumbertombol:link {color:white;background:#2f5abb;background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) );padding:4px;border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px;}a.pagenumbertombol:visited {color:white;background:#2f5abb;background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) );padding:4px;border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px;}a.pagenumbertombol:hover {color:white;background:white;padding:5px;background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) );}a.pagenumbertombol:active{color#FFCC33;}.clear{clear:both;}.style1 {color: #FFCC33;font-size:14px;font: bold;}a.bintang:link {color:#FFCC33;}a.bintang:visited {color:#FFCC33;}a.bintang:hover {color:#FFCC33;}a.bintang:active{color#FFCC33;}.button {border: 1px solid #006;color:white;background:#2f5abb;background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) );padding:4px;border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; height:31px;}.button:hover { height:31px;border: 1px solid #f00;color:white;background:white;padding:4px;background-image: -moz-linear-gradient(top,#9eb7f0,#3a66ca);background-image: -webkit-gradient(linear,left top,left bottom,from(#9eb7f0),to(#3a66ca) );}

.buttonbig {
border: 1px solid #006;color:white;
background:#2f5abb;background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) );
padding:15px;
border-radius: 4px 4px 4px 4px;
 -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; 
 
 }.buttonbig:hover {border: 1px solid #f00;color:white;background:white;background-image: -moz-linear-gradient(top,#9eb7f0,#3a66ca);background-image: -webkit-gradient(linear,left top,left bottom,from(#9eb7f0),to(#3a66ca) );}


.buttonsmalls {
border: 1px solid #006;color:white;background:#2f5abb;background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) );
padding:5px;
border-radius: 4px 4px 4px 4px;
 -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; 
 
 }.buttonsmalls:hover {border: 1px solid #f00;color:white;background:white;background-image: -moz-linear-gradient(top,#9eb7f0,#3a66ca);background-image: -webkit-gradient(linear,left top,left bottom,from(#9eb7f0),to(#3a66ca) );}
 
 
 
.isicustom {background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) );padding: 4px 13px 4px 13px;border-radius: 40px 0px 40px 0px; -moz-border-radius: 40px 0px 40px 0px; -webkit-border-radius: 40px 0px 40px 0px; height:31px;}.isicustom:hover { height:31px;margin-left:3px;padding: 4px 10px 4px 16px;background-image: -moz-linear-gradient(top,#9eb7f0,#3a66ca);background-image: -webkit-gradient(linear,left top,left bottom,from(#9eb7f0),to(#3a66ca) );}.usernamefix {background: #fff6bf url(exclamation.png) center no-repeat;background-position: 15px 50%; text-align: left;padding: 10px 20px 10px 45px;border-top: 2px solid #ffd324;border-bottom: 2px solid #ffd324;}.emailfix {background: #fff6bf url(exclamation.png) center no-repeat;background-position: 15px 50%; text-align: left;padding: 10px 20px 10px 45px;border-top: 2px solid #ffd324;border-bottom: 2px solid #ffd324;}.pinfix {background: #fff6bf url(exclamation.png) center no-repeat;background-position: 15px 50%; text-align: left;padding: 10px 20px 10px 45px;border-top: 2px solid #ffd324;border-bottom: 2px solid #ffd324;}.failedfix {background: #fff6bf url(exclamation.png) center no-repeat;background-position: 15px 50%; text-align: left;padding: 10px 20px 10px 45px;border-top: 2px solid #ffd324;border-bottom: 2px solid #ffd324;}.judulfix {background: #fff6bf url(exclamation.png) center no-repeat;background-position: 15px 50%; text-align: left;padding: 10px 20px 10px 45px;border-top: 2px solid #ffd324;border-bottom: 2px solid #ffd324;}.isifix {background: #fff6bf url(exclamation.png) center no-repeat;background-position: 15px 50%; text-align: left;padding: 10px 20px 10px 45px;border-top: 2px solid #ffd324;border-bottom: 2px solid #ffd324;}

 .info, .success, .warning, .error, .validation {
 border: 1px solid;margin: 10px 0px;padding:15px 10px 15px 5px;background-repeat: no-repeat;
 }.error {color: #D8000C;background-color: #FFBABA;background-image: url('error.png');}.inputform{height:30px;margin-top:5px;margin-bottom:5px;width: 50%;border:2;border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px;}.inputformtgl{height:30px;margin-top:5px;margin-bottom:5px;border:1;border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px;}.footer{padding:15px;font-size:12px;color:white;background-color: #3b5998;background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) );}.change{font-size:10px;}.adsbardefault{float:left;}.adsbarkiri{width: 300px;padding:1px;float:left;margin-right:10px;margin-top:5px;margin-bottom:5px;}.adsbarkanan{width:580px;float:left;}a:link {text-decoration: none; font:bold;}a:visited {text-decoration: none;}a:hover {text-decoration: none;color: #CCCCCC;}a:active {text-decoration: none;}#catnav {padding: 0; font-size:100%;letter-spacing: .1em;}#catlist {padding: 0 1px 1px; margin-left: 0;width: 100%;}#catlist li {list-style: none;margin: 0;text-align: left;border-bottom:1px solid #ddd;paddingt:0 10px;clear:both; overflow:hidden;}#catlist li:hover {border:1px solid #777; overflow:hidden; }#catlist li:hover .catname { color:#222; }#catlist li:hover .icon {margin-top:0px;}#catlist li span{background:url(../images/sprite.1.0.4.png) -35px -190px no-repeat;float:right;display:block;width:20px;margin-top:10px;}#catlist li a{display: block;text-decoration: none;width:100%;}.catname{float:left;width:80%;font-weight:bold;padding:15px ;}.kosong{float:left;width:1px;height:1px;margin-left:10px;display:block;}.icon{display:block;width:40px;height:40px;background:url(../images/read.png) 0 0 no-repeat;float:left;margin:2px 0 0 -2px;}.iconarrow{display:block;width:40px;height:40px;background:url(../images/arrow.jpg) 0 0 no-repeat;float:right;margin:2px 0 0 -2px;}

.judulkotaklog{height:30px;padding:3px;color:white;background:#2f5abb;border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px;background-image: -moz-linear-gradient(top,#9d5cc9,#8a39c3);background-image: -webkit-gradient(linear,left top,left bottom,from(#9d5cc9),to(#8a39c3) ); font: bold 13px "Arial", Verdana, Arial, Helvetica, sans-serif;}

.judulisikotaklog{height:30px;padding:3px;background:#ccc;border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; -webkit-border-radius: 0px 0px 0px 0px;background-image: -moz-linear-gradient(top,#fff,#ccc);background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#ccc) ); font: 12px "Arial", Verdana, Arial, Helvetica, sans-serif;}

.judulbataskotaklog{height:10px;padding:3px;background:#2f5abb;border-radius: 0px 0px 4px 4px; -moz-border-radius: 0px 0px 4px 4px; -webkit-border-radius: 0px 0px 4px 4px;background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) ); font: bold 13px "Arial", Verdana, Arial, Helvetica, sans-serif;}


.kotakbig {float:left;margin-left:2%;width:88%;border: 1px solid #006;color:white;background:#2f5abb;background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) );padding:4px;border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; padding:20px; }


.kotak { border: 1px solid #8e846b; background: #feeebd url() 50% top repeat-x; color: #383838;
-webkit-border-radius: 0px 0px 0px 0px;background-image: -moz-linear-gradient(top,#fff,#ccc);background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#ccc) ); border-radius: 10px 10px 10px 10px;
 }
 
 
.bodyfull{
width:100%;
float:left;
}
.bodykiri{
width:70%;
float:left;
}
.bodykanan{
width:30%;
float:left;
}



.menupanjang {
border: 1px solid #ccc;
color:white;
background:#2f5abb;
background-image: -moz-linear-gradient(top,#ccc,#fff);
background-image: -webkit-linear-gradient(top,#ccc,#fff);
background-image: -webkit-gradient(linear,left top,left bottom,from(#ccc),to(#fff) );
border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px;  }
.menupanjang:hover {
border: 1px solid #fff;color:white;
background:white;
background-image: -moz-linear-gradient(top,#ccc,#ccc);
background-image: -webkit-linear-gradient(top,#ccc,#ccc);
background-image: -webkit-gradient(linear,left top,left bottom,from(#ccc),to(#ccc) );
}

.barjudul{
height: auto;
float:left;width:99%;
background:#2f5abb;color:white;
background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);
background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) );
margin-left:1%; 
border-radius: 14px 14px 0px 0px; -moz-border-radius: 14px 14px 0px 0px; -webkit-border-radius: 14px 14px 0px 0px;  

}

.barjudulkiri{
float:left;width:99.4%;background:#2f5abb;color:white;height: auto;background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) );
border-radius: 14px 14px 0px 0px; -moz-border-radius: 14px 14px 0px 0px; -webkit-border-radius: 14px 14px 0px 0px;  }
 
.barjudulsearch{
position:fixed;
float:left;width:99%;
height: auto;
background:#2f5abb;color:white;
background-image: -moz-linear-gradient(top,#8cabf1,#2f5abb);
background-image: -webkit-linear-gradient(top,#8cabf1,#2f5abb);
background-image: -webkit-gradient(linear,left top,left bottom,from(#8cabf1),to(#2f5abb) );

}

.barkirimenu{
position:fixed;
float:left;
width:5%;
height: auto;
background:#2f5abb;color:white;
background-image: -moz-linear-gradient(top,#07359c,#2f5abb);
background-image: -webkit-linear-gradient(top,#07359c,#2f5abb);
background-image: -webkit-gradient(linear,left top,left bottom,from(#07359c),to(#2f5abb) );
}
.bintang {
color: #bd8f04;font: bold; font-size:15px;
}
.styleratingbig {
color: #bd8f04;font: bold;
}


#table-a tr:hover td {
 background:#ccc;border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; -webkit-border-radius: 0px 0px 0px 0px;
 background-image: -moz-linear-gradient(top,#dcddf1,#ccc);
 background-image: -webkit-gradient(linear,left top,left bottom,from(#dcddf1),to(#ccc) );
 }
 

/*-------------- NAVIGATION -------------------*/
#catnav {padding: 0; font-size:100%;letter-spacing: .1em;;}
#catlist {padding: 0 1px 1px; margin-left: 0;width: 100%;}
#catlist li {list-style: none;margin: 0;text-align: left;border-bottom:1px solid #ddd;paddingt:0 10px;clear:both; overflow:hidden;}
#catlist li:hover {border:1px solid #777; overflow:hidden; }
	#catlist li:hover .catname { color:#222; }
	#catlist li:hover .icon {margin-top:0px;}
#catlist li span{background:url(../images/sprite.1.0.4.png) -35px -190px no-repeat;float:right;display:block;width:20px;margin-top:10px;}
#catlist li a{display: block;text-decoration: none;width:100%;}
.catname{float:left;width:80%;font-weight:bold;padding:15px ;}
.kosong{float:left;width:1px;height:1px;margin-left:10px;display:block;}