*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}


body{
	background: #dedede;
	font-family: Helvetica, arial, sans-serif;

	font-size: 14px;
}

p{
    margin-top: 0px;
	margin-bottom: 14px;
    line-height: 2.0em;
    color:#505050;
}

h2{
	margin-bottom: 10px;
	border-bottom: 1px solid red;
	border-top: 1px solid red;
    background: orange;
    padding: 10px;
    color:#fff;
    font-size: 14px;
    clear: both;
}

h3{
    margin-bottom:10px;
    font-size: 16px;
	color:#666;
}

a{
	text-decoration: none;
	color: #0096e1;
}
a:hover{
	text-decoration:underline;
	color: orange;
}

.fa-cat{
	color:orange;
	padding-bottom:10px;
}

.container{
	max-width: 1020px;
	margin: 20px auto;
	background: #fff;
	overflow: hidden;
	padding: 10px;
}

.header{
	padding: 20px;
    background: #0096e1;
	margin-bottom:5px;
    color: #fff;
}

.hteks{
	text-align:right;
}

.topiklan{
	margin: 5px auto;
	background: #d3a267;
	overflow: hidden;
	padding: 5px;
	height:100px;
}


.iklanh300{
	margin-top:20px;
	background: #d3a267;
	height:300px;
}

.gbrartikel{
	margin-top:30px;
	text-align:center;
	margin-bottom:20px;
}

.yutub iframe {
	width:100%;
	height:350px;
}

.yutub {
	width:100%;
	height:350px;
}

.kosong20{
	height:20px;
}

.forpre {
	display: block;
	white-space: pre;
	background-color:#444444;
	padding:10px;
}

.forcod {
	font-family: Consolas,"courier new";
	color: white;
}

.barisputih {
	color:#dd0000;
	background-color:#ffffff;
	vertical-align:middle;
	height:20px;
	font-weight:bold;
}

/* Menu */

 /* Add a black background color to the top navigation */
.topnav {
  background-color: #0096e1;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: orange;
  color: white;
}

.topik{
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: left;
  padding: 14px 16px;
  font-size: 14px;
}

/* Hide the link that should open and close the topnav on small screens */
.kotak {
    margin-bottom: 0px;
    padding-top: 10px;
	padding-bottom:2px;
	border-bottom: 1px solid #ddd;
}

.kotak ul {
    margin-top: 0px;
	margin-bottom: 20px;
	margin-left: 20px;
    color:#666;
}

.kotak li {
    line-height: 1.7em;
	margin-bottom: 10px;
}


.judulbergaris {
    margin-bottom:0px;
    padding-top: 10px;
	border-bottom: 1px solid #ddd;
}

.kotaknogaris {
    margin-bottom: 0px;
    padding-top: 10px;
	padding-bottom:2px;
}

.tanggal {
    font-size: 10px;
    margin-bottom:10px;
	color:red;
}

.berikut {
	font-size:10px;
	margin-top:5px;
	margin-bottom:15px;
	color:#aaaaaa;
}

.sumberi {
	font-size:10px;
	margin-top:5px;
	margin-bottom:15px;
	color:#aaaaaa;
}

pre::before {
    content: attr(judul);
    margin-top: 10px;
    padding: .2em;
    font-size: .8em;
    color: #fff;
    background: #37474f;
    display: block;
    text-indent: .3em;
    line-height: normal;
	box-sizing: border-box;
}

pre code {
	display:block;
	background:#555;
	white-space:pre;
	overflow-x:scroll;
	max-width:100%;
	min-width:100%;
	padding:10px;
	color:#fff;
	font-weight:bold;
	margin-bottom:5px;
}

.imgmover {
	border: 1px solid #eceff1;
	opacity:0.5;
	margin-left:auto;
	margin-right:auto;
	display:block;
	margin-top:20px;
	margin-bottom:20px;
}

.imgmover:hover {
    border: 1px solid #555;
	box-shadow: 2px 2px #aaa;
	-webkit-box-shadow: 2px 2px #aaa;
	-moz-box-shadow: 2px 2px 2px #4170cf;
	opacity:1;
	transition: opacity 300ms;
}

.imgmover::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.wr-kode {
	color: #99ff33;
}

.wr-cell {
	color:#ffcc00;
}

.wr-angk {
	color:#ff99ff;
}

.wr-teks {
	/*color:#33ccff;#6F00FF
    color:#799EFF;*/
    color:#4582FF;
}

/* Main */
.left{
		width: 160px;
		margin: 5px;
		margin-left:0px;
		float: left;
	}

	.left ul{
		list-style-type: none;
	}
	.left ul li{
		display: block;
	}
	.left ul li a{
		display: block;
		border-bottom: 1px solid #dedede;
		margin-bottom: 5px;
		padding: 5px 5px;
	}
    .left ul li a#hid{
        display: none;
    }
	.left ul li a:hover{
		color: orange;
	}

	.middle{ 
		width: 520px;
		margin: 5px;
		float: left;
	}
		.middle img{
			max-width: 100%;
			height: auto;
		}

		.middle a{
			/*font-weight: bold;*/
		}

.h2mid{
	margin-bottom: 10px;
	border-top: solid 1px green;
	border-bottom: solid 1px green;
    background: #0096e1;
    padding: 10px;
    color:#fff;
    font-size: 14px;
	font-weight:bold;
    clear: both;
}

.h2midinpar{
	margin-top:10px;
	margin-bottom: 10px;
	border-top: solid 1px green;
	border-bottom: solid 2px green;
    padding: 10px;
    color:#0096e1;
    font-size: 14px;
	font-weight:bold;
    clear: both;
}

.h2midgray{
	margin-top:10px;
	margin-bottom: 10px;
	border-top: solid 1px green;
	border-bottom: solid 2px green;
    padding: 10px;
	background: #fafafa;
    color:#0096e1;
    font-size: 14px;
	font-weight:bold;
    clear: both;
}

.halaman {
	font-size:12px;
	padding-top:20px;
	padding-bottom:10px;
	font-weight:bold;
}

.halaman a {
  text-decoration: none;
  display: inline-block;
  padding: 12px 16px;
}

.halaman a:hover {
  background-color: orange;
  color: white;
}

.tdkdipilih {
  padding: 12px 16px;
  background-color: #ddd;
  color: black;
}

.bunder {
  border-radius: 50%;
}

.halangka {
/*  background-color: #4CAF50;*/
  background-color: #0096e1;
  color: white;
}
.hotnews{
	margin-bottom: 10px;
	border: 1px solid #bfbfbf;
    background: yellow;
    padding: 10px;
    color:#fff;
    font-size: 14px;
	text-align:center;
}

.hotnews a {
	color: red;
	text-decoration:underline;
}

.hotnews a:hover {
	color:green;
	text-decoration:none;
}

.thumb img {
    padding-right: 10px;
    width: 100px;
    float:left;
}

	.right{
		width: 300px;
		margin: 5px;
		margin-right:0px;
		float: left;
	}


	.right ul{
		list-style-type: none;
	}
	.right ul li{
		display: block;
	}
	.right ul li a{
		display: block;
		border-bottom: 1px solid #dedede;
		margin-bottom: 5px;
		padding: 5px 5px;
	}
	.right ul li a:hover{
		color: orange;
	}

.footer{
	clear: both;
	border-top: 1px solid #dedede;
	padding: 5px;
	margin: 5px;
    text-align: center;
}

#dptk table {
	/*border: 1px solid green;*/
	border-collapse: collapse;
	margin:0;
	padding: 0;
	width: 100%;
}

#dptk table tr {
	background: #fff;
	padding: .35em;
	border-bottom:1px solid #ccc;
}

/* tabel */
table {
	/*border: 1px solid green;*/
	border-collapse: collapse;
	margin:0;
	padding: 0;
	width: 100%;
}
table caption {
	font-size: 1.5em;
	margin: .25em 0 .75em;
}
table tr {
	background: #eee;
	padding: .35em;
	border-bottom:1px solid #ccc;
}
table th,
table td {
	padding: .625em;
	text-align: left;
}
table th {
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: green;
	color: white;
}
table td img {
	text-align: center;
}

.tdleft {
	text-align:left;
}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* untuk ukuran 1080px kebawah */
@media screen and (max-width: 1080px) {
	
	.container {
		width: 100%;
	}

    .left {
		width: 30%;
	}

    .middle {
		width: 68%;
		float: right;
		margin-right:0px;
	}
	
	.right {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}
}


/* untuk ukuran layar 700px kebawah */
@media screen and (max-width: 780px) {

	.left {
		width: auto;
		margin-right:0px;
		float: none;
		clear:both;
	}		
	
	.left ul{
		list-style-type: none;
	}
	.left ul li{
		display: inline;
	}
	.left ul li a{
		display: inline-block;
		border-bottom: 1px solid #dedede;
		margin-bottom: 5px;
		padding: 5px 5px;
	}
	
	.middle {
		width: auto;
		margin-left:0px;
		float: none;
	}
	
	.right {
		width: auto;
		margin-left:0px;
		margin-right:0px;
		float: none;
	}

}

@media screen and (max-width: 620px) {

  /*.topnav a:not(:first-child) {display: none;} */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 5px;
  text-decoration: none;
  font-size: 12px;
}

/* tabel resizer */
table {
		border: 0;
	}
	table caption {
		font-size: 1.3em;
	}
	table thead {
		display: none;
	}
	table tr {
		border-bottom: 3px solid green;
		display: block;
		margin-bottom: .725em;
	}
	table td {
		border-bottom: 1px solid green;
		display: block;
		font-size: .8em;
		text-align: right;
	}
	table td:before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}
	table td:last-child {
		border-bottom: 0;
	}
}