*{padding: 0;margin: 0;box-sizing: border-box;}
body{background: #f9df8d;font-family: 'Helvetica', arial, sans-serif;font-size: 15px;}
p {margin-bottom: 20px;line-height: 1.5em;padding-bottom:3px;color:#6d6d6d;}
h1 {font-size:30px;color:#6d6d6d;}
h3{margin-bottom: 20px;border-bottom: 1px solid #aaa;}
a {text-decoration: none;color: #333;}
a:hover{color: #666;}
.container {max-width: 1080px;margin: 0px auto; background: #fff;overflow:hidden; padding: 0px;}
.header {border: 1px solid #dedede;	padding: 10px; margin: 10px; background-color: #f6d260;}

/* Main */
	.left{width: 26%; border: 1px solid #dedede; background: #ebebeb; padding: 10px; margin: 10px; float: left;}
	.middle {width: 70%; border: 1px solid #dedede; padding: 10px; margin: 10px; float: left;}
	.middle img{max-width: 100%; height: auto;}
	.middle a{font-weight: bold;}
.footer {clear: both; border: 1px solid ##7f7d00; padding: 10px; margin: 10px; color:white; background-color:#188443;}

/* --------------------------------- CSS BLOG ----------------------------- */


/*
PAGINATION CLASSES [3]
xt_pagination
selected
*/
.xt_blog_paging
{
  margint-bottom:10px;
  padding:3px 5px;
  border-top:1px dashed #d1d1d1;
  text-align:center;
  font-size:20px;
}

.xt_blog_paging span {background-color:#cecece;color:red;margin:0 5px;padding:0 10px;}
.xt_blog_paging a {background-color:#a3a3a3;color:white;margin:0 5px;padding:0 10px;}


.xt_blog_paging .selected span
{
  margin:3px;
  border:1px solid black;
}
.xt_blog_paging span a
{
  text-decoration:none;
}


.xt_blog_paging span a span
{
  margin:3px;
  border:1px solid fuchsia;
}




.xt_blog_subtitle {background-color:#f2f2f2;padding:5px;color:#d6d6d6;font-size:12px;font-style: italic;}
.xt_image img {widht:120px;text-align:center;}
.xt_blog_title_link {margin:10px;}
.xt_blog_title_link a {margin:10px 0px;}
span.xt_heading {padding:0px 3px;}
.xt_blog_title_link a{color:red;}
.xt_heading span{padding:10px 0;}
/* container luar dalam blog */
.xt_container {background-color:#f2f2f2;padding:10px;widht:100%;}
/* title blog dalam */
.xt_blog_title {border-bottom:1px dashed #d1d1d1;color:#8c8a8a;font-size:17px;text-align:left;margin-bottom:5px;padding:5px;}
/* isi konten blog*/
.xt_blog_content{color:#707070;padding:5px;border-bottom:1px dashed #d1d1d1;margin-bottom:10px;}
/*back to post */
.xt_blog_back_to_posts {padding:5px;color:#7981ad;font-style: italic;font-weight: bold;}
.xt_blog_back_to_posts .xt_link xt_button a{color:#2b7cff;}
/*form komentar*/
.xt_blog_write_a_comment {display:none;}
span.xt_blog_comments_title{display:none;}
/* tag */
.xt_tags {border-bottom:1px dashed #d1d1d1;font-size:13px;color:#d6d6d6; padding-bottom:3px;}
.xt_tags a {font-size:13px;color:#a0a0a0;font-style:italic;}

/* ------------- NAMPIILIN GAMBAR GALERI ------------------------------------*/
.post {padding:0 5px;}
.post img{border:1px solid #1a90ff;width:33%;display:inline-block;}
.filelist_paging {background-color:yellow;text-align:center;padding:10px;}
.filelist_paging a {align:center;font-size:20px;padding:10px;}
.filelist_paging span {align:center;font-size:20px; padding:10px; color:grey;}

/*------------- SLIDE SHOW ------------------------------------------------------*/
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

















/*-------------------------- css html comment box ------------------------*/
/* Posting */
.date {color:#939393;font-size:10px;bacground-color:#f9c0b3;padding-left:10px;}
.author {font-size:10px;padding:5px;color:#939393;}
.comment {background-color:#f9f9f9;margin:5px 0px}
.date .author {background-color:#f9c0b3;}
.hcb-comment-tb {text-align:right;display:none;}
#hcb_form_name {background-color:yellow; widht:100%;}
#hcb_form_name textarea {background-color:yellow; widht:100%;margin-bottom:5px;}
#HCB_comment_box textarea { height:40px; background-color:#fffce5;margin-bottom:5px;}
#HCB_comment_box p {display:none;}

/*hilangkan*/
 a.btn {display:none;}
 a.home-desc {display:none;}
.home-desc {display:none;}
label a{display:none;}
input#hcb_form_name {color:black; font-size:15px;  background-color:#e5efff;}

/* input */
.hcb-shadow-m input {width:100%;}   /*fORM NAMA*/

#HCB_comment_box .submit {background:none; background-color:green; border:1px solid darkgreen;	padding:5px 10px;  color: white;}

/*Komentar*/
#HCB_comment_box blockquote {color:#939393;padding:0px 0px 10px 10px; margin:0px;font-size:13px;border-bottom:dashed #e5e5e5 1px;}
#HCB_comment_box blockquote img {width:30px; margin-right:5px;}
#HCB_comment_box .text-blur {color:red;}
#HCB_comment_box .text-focus {color:darkred;}
.hcb-icon{display:none;}
.hcb-wrapper-half input-field {margin-bottom:5px;}

/***********************************/
.td-class {background-color:white;width:20%;border: 3px solid white;text-align:center;}
.td-class a {color:#12813e;height:bold;font-size:22px;}


/***********************************************************************************
					UKURAN LAYAR MAKSIMAL LEBAR 1000PX
*************************************************************************************/
/* untuk ukuran 1000px kebawah */
@media screen and (max-width: 1000px) {
	.container {width: 100%;}
	.left {width: 50%;	background: #fff000;}
	.middle {width: 68%;float: right;}

}


/* untuk ukuran layar 900px kebawah */
@media screen and (max-width: 900px) {
	.header, 
	.header table td a {font-size:15px}
	
	.footer{text-align: center;}
	.left {display:none;width: auto;float: none;}
	.middle {width: auto;float: none;}
	h1 {font-size:20px;}
	.td-class{font-size:20px;}
	table td img {width:50px;}
	.container{margin: 0px auto;background: #fff;overflow: hidden;padding: 0px;}
}

/* untuk ukuran 500px kebawah */
@media screen and (max-width: 500px) {
/* BLOG */
  .xt_image {widht:100%;}
}