@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto+Slab:400,700');

body {margin: 0px;	font-size:13px;	font-family:'Roboto Condensed', sans-serif; color:#4E4E4E;}
h1,h2,h3,h4 {font-family: 'Roboto Slab', serif;}
h1 {color: #DF1600;}
h2 {font-size:2.2em; line-height:1.2; font-weight:400; color: #DF1600; padding-bottom:20px; text-transform:uppercase}
	h2 span {display: block; text-transform: uppercase; font-size: 13px;line-height: 2; color:#7D7D7D;}	
h3 {font-size: 1.8em; line-height:1.2; color: #A60000; padding:1.5em 0 0;}
h4 {margin:3em 0 .5em;font-size:1.8em;font-weight: 200;color:#A60000;}
a {text-decoration:none}
	a:hover {color:#FF0000}
img {width:100%; height:auto}
	.noRes {width:inherit; height:auto:}
	a img {border: none; width:100%;}
	.imgleft, article img {margin: 5px 25px 10px 0; float:left; width:inherit; height:auto}
	.imgDua {display:inline-block; margin:10px 0; text-align:center;}
ul li {list-style-position: inside}


/* LAYOUT */
table { 
	width:100%;
	border-collapse: collapse; 
	margin:25px auto;
	}

/* Zebra striping */
tr:nth-of-type(odd) { 
	background: #eee; 
	}

th { 
	background: #3498db; 
	color: white; 
	}

td, th { 
	padding: 10px; 
	border: 1px solid #ccc; 
	vertical-align:top;
	}
	
.lebar {width:80%; margin:0 auto; position:relative;}
.tabelku {
	font-size:14px;
	border: 0;
	border-right: 1px solid #D6D6D6;
	padding: 10px 25px;
	line-height: 22px;
	vertical-align: text-top;
	width:700px;
}

.notabel {border: none;	padding: 10px 15px;	font-size: 12px; line-height: 16px;	text-decoration: none;	width:310px; position:relative;}
.center {margin:0 auto}

#menu a {
	display: block;
	color: #3A3A3A;
	border-bottom: 1px solid #eee;
    padding: 7px 0;
}
	#menu a:hover {color: #DF1600;}
	
.leftNav ul li {list-style-type: none; margin-left:-25px;}
.leftBlok, .leftBlokNew {background-color: #F4F4F4;	padding: 7px 0 5px 10px;}
.leftBlokNew {background-color:#FFC; color:#900;}
h1.leftBlok, h1.leftBlokNew {font-size:14px}
.sumberGambar {
	text-align:center;
	font-size:small;
	color:#666;
	padding-bottom:15px;
	font-style: italic;
}
.listOutside li{list-style-position: outside;}

/* CSS3 EFFECT */
.box, .box2 {width:619px; height:100%; margin:25px auto 0;}
.box2 {width:645px;}
.effect2 { position: relative;}
.effect2:before, .effect2:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}


#google {width:auto;height:23px;float: right;padding-bottom: 5px;}
.kanan {font-size: x-small; color: #666666; }
.youtubeHeadline {
	font-size:120%;
	padding: 5px 15px;
	font-weight: 800;
	background-color:#F4F4F4;
	float:left;
	margin-bottom:-3px;
}
.yt {padding:10px 0}
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; width:49%; float:left; margin-right:30px; margin-bottom:30px;}
.video-container.full {width:100%}
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* ADVERTORIAL */
#TopAdv {float: right;	padding:7px 5px;}
.NavAdv {padding: 0 0 23px ;}
	.NavAdv.bottomNav {position:absolute; bottom:125px
	;}
.NavAdvLepas {padding: 20px 0;}
.adsensecamp {font-size: 11px;font-family: arial;line-height: 1em;}
.adsense {font-family: "Tahoma", Geneva, sans-serif;color: #000;}
.kliksaya {	padding-top: 10px;}
.merah {color: #FF0000}
.style45 {font-size: 12px;	font-weight: bold;color: #666666;}
#pictureholder {position:relative;}
.pictureholder {position:relative;}
.bx-wrapper {width:290px;}
#iklan160 {text-align:center; margin:12px 0;}


/* NAVIGASI */
.nav {
	background-image: url(../_image/layout/navnew.gif);
	background-repeat: repeat-x;
	text-align:center;
	padding-bottom:20px;
	font-size:15px;
}
	.nav a {COLOR: #eee;}
	.nav a:hover {COLOR: #FF8282;}

.nav ul li {
	display: inline;
	list-style-type: none;
	padding-right: 15px;
	border-right: 2px solid #999;
	margin-left:10px;
}
.valign {padding-top:6px; margin-left:-30px;}
.valign .lastnav {border:none}
.valign .navSeparator {	border-right: 2px solid #FFF; padding-top:9px;}
#secNav {display: block;position: absolute; bottom: 0;right: 0;}
.bodytext {}
	.bodytext A {padding: 0 5px; font-size:14px;}
	.bodytext A:hover {cOLOR: #FF0000;}

/* SOSIAL SHARE */
#sosCon {
	text-transform: uppercase;
	color: #900;
	text-align:center;
	width:200px;
	height:53px;
	padding: 5px;
	border: thin solid #CCC;
	border-radius:9px;
	margin: 50px 0 0;
}
#sosCon p {
	font-weight: 700;
	display:block;
	margin:0 0 -5px 0;
	font-size:80%;
	letter-spacing:2px;
}
.sosial {
	padding: 5px;
	color: #F00;
	background-color: #FFF;
	display:inline-block;
}

#quote {background-color: #FFC;	padding: 10px;	border: thin solid #F90;}
.quote {background-color: #FFC;	padding: 18px 25px;	border: thin solid #F90; font-size:larger; line-height:1.7}
	.quote.text {border-top:none; border-bottom:none;border-right:none; font-size:1.5em; background-color:white; border-left:6px solid #C73626; color:#C73626}
.quotehalf {width:300px;font-size:25px; display:block; float:left; padding:30px 25px 15px 10px; line-height:1.3; word-spacing:5px; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; letter-spacing:-1px; color:#C73626;}

/* FOOTER */
footer {padding: 15px 0; height:60px; background-color:#CCC; font-family: Verdana, Geneva, sans-serif;}
footer a {text-decoration:none}
footer a:visited{color:#00F}
footer a:hover{color:#900}
footer img, header img {width:inherit; height:auto}
#leftFooter {float: left;padding-left:10px;}
#rightFooter {float: right;text-align: right;padding-right:5px;}
.AdvFooter{display:inline-block;position:relative;	margin-top:-145px;}
.copy {margin-left:-2px;}



/* HOMEPAGE */
#homepage {font-size:12px; line-height:20px; width:460px;}
.homeRight {border:none;}
.leftNav ul .headlineHome{
	text-transform: uppercase;
	color: #F00;
	font-weight: 800;
}
.navLine {border-bottom: 3px solid #888383}
.lebar tr .notabel .leftBlok {font-size: 14px;}
.percakapan {
	 padding: 15px 40px 15px 55px;
    border: 10px solid #DADADA;
    border-left: none;
    border-right: none;
    margin: 40px auto;
}


#myBtn {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 10px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background: rgba(255, 0, 0, 0.7);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

@media screen and (min-width: 721px) and (max-width: 1024px){	
	.lebar {width:100%;}	
	
	table { 
	  	width: 100%; 
	}

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}

	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		/* Label the data */
		content: attr(data-column);

		color: #000;
		font-weight: bold;
	}
}

@media screen and (max-width: 480px) {
		ul li {list-style-position: outside;}
		.quotehalf{ width:300px;padding-bottom: 35px;padding-top: 25px;
}
		.nav {background-repeat:repeat; height:41px;}
		.nav ul li {display:inline-block; top: -6px;
    padding: 6px; position: relative; margin: 0; font-size:12px;}
		.box, .box2 {width:100%; height:auto}
		#secNav,#rightFooter,#TopAdv {display:none}
		.lebar{width:100%;}
		.imgleft, .quotehalf, article img{float:none; margin:15px auto;}	
}