*{
	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: 10px;
    line-height: 1.7em;
    color:#666;
}

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:0px;
    font-size: 18px;
}

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

.nogaris a:hover{
	text-decoration:none;
	color: white;
}

.nogaris a:link{
	text-decoration:none;
	color: white;
}

.nogaris a:visited{
	text-decoration:none;
	color: white;
}

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

.container{
	max-width: 1030px;
	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:auto;
}


.iklanh300{
	margin-top:20px;
	/*background: #d3a267;*/
	height:auto;
}

.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,ol {
    margin-top: 0px;
	margin-bottom: 20px;
	margin-left: 20px;
    color:#666;
}

.kotak li {
    line-height: 1em;
	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;
}

.formrequest3 {
	width:100%;
	font-size:14px;
	font-weight:bold;
	margin-top:15px;
	padding-bottom:8px;
}

.formrequest3 .chane {
	color:#998888;
	font-size:14px;
}

.formrequest3 .std {
	color:#999999;
	font-size:14px;
	font-weight:normal;
}

.formrequest3 a {
	color:#998888;
	text-decoration:none;
}

.formrequest3 a:hover {
	color:#994444; /*0096E1*/
	text-decoration:none;
}


.download {
	width:100%;
	border-top:1px solid #dddddd;
	border-bottom:1px solid #dddddd;
	padding-top:5px;
	margin-top:5px;
	margin-bottom:20px;
	
}

.download ul {
	list-style:none;
	padding-top:10px;
	margin-bottom:10px;
}

.download li {
	display:inline;
	padding-left:10px;
}

.download a {
	color:#0058BB;
	text-decoration:none;
	font-weight:bold;
}

.download a:hover {
	color:#0058BB;
	text-decoration:underline;
	font-weight:bold;
}

.download img {
	vertical-align:middle;
}

.headerpic {
	text-align:center;
}

/* 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;
}

.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: 310px;
		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;
}

/* tabel */
table {
	/*border: 1px solid green;*/
	border-collapse: collapse;
	margin:0;
	padding: 0;
	margin-top:20px;
	width: 100%;
}
table caption {
	font-size: 1.5em;
	margin: .25em 0 .75em;
}
table tr {
	padding-top: .3em;
}
table th,
table td {
	padding-top: .7em;
	text-align: left;
	vertical-align:top;
	color:#555;
	padding-right:1em;
}
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;
	}
}