@charset "utf-8";
/* CSS Document */

body{
	margin: 0;
	background: #ffffff;
	font: normal medium "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.bersih { clear:both; }

/* Membuat Tampilan Header */
.header{
	width: auto;
	height: 127px;
	margin: 0 auto;
	background: url(../image/header.png);
}

/*Membuat Tampilan Logo PJ dan Logo Pertamina pada Header*/
.header .logo {
	width: 970px;
	height: 134px;
	margin: 0 auto;
	background: url(../image/potong2.png) no-repeat;
}

/*Membuat Tampilan Logo PJ pada Header*/
.header .logo .pj {
	width: 150px;
	height: 43px;
	float: left;
	margin-top: 25px;
	background: url(../image/logo.png) no-repeat;
}

/*Membuat Tampilan Logo Pertamina pada Header*/
.header .logo .partner {
	width: 159px;
	height: 56px;
	float: right;
	margin-top: 20px;
	background: url(../image/pertamina.png) no-repeat;
}

/*Membuat Tampilan Isi*/

.contents {
	width: 970px;
	height: auto;
	margin: 0 auto;
	background: #fff;
	border: 0px solid #00F;
}

/*mengatur pembagian kolom*/

.container {
	padding: 0px 0px 0px 0px;
}

.container .colm{}

/*Tulisan Berjalan Ucapan Selamat Datang*/
.container .colm .postwalk {
	float: left;
	width: 970px;
	border:1px solid #F00;
	padding-top:7px;
	padding-bottom:7px;
	color:#000;
	font: small Tahoma, Geneva, sans-serif;
}

/*Membuat Tampilan Slide Gambar dan Gambar Best Reward*/
.container .colm .top-colm {
	float: left;
	width: 970px;
	height: auto;
	margin:1px 0px 5px 0px;
}

/*Membuat Tampilan Slide Gambar*/
.container .colm .top-colm .image-slide {
	float: left;
	width: 668px;
	height: 265px;
	margin: 1px 0px 0px 3px;
	border: 0px solid #06F;
}

/*Membuat Tampilan Gambar Best Reward*/
.container .colm .top-colm .best-reward {
	float: right;
	width: 287px;
	height: 265px;
	margin: 1px 3px 0px 1px;
	background: url(../image/bgjudul.png) top no-repeat;
}

/*===================================================================================
Membuat Tampilan untuk berita lengkap dan galery serta reward / Style khusus selain index
=====================================================================================*/

/*Kolom sebelah kiri untuk membuat tampilan banner dan isi*/
.container .colm .top-colm .left {
	float: left;
	width: 673px;
	height: auto;
	margin:0px;
}

/*Membuat Tampilan banner sebelum berita atau galery*/
.container .colm .top-colm .left .image-area {
	float: left;
	width: 668px;
	height: 99px;
	margin: 1px 0px 0px 3px;
}

/*Membuat Tampilan tempat isi berita lengkap, galery dan sebagainya*/
.container .colm .top-colm .left .text-area {
	float: left;
	width: 668px;
	height: auto;
	margin: 1px 0px 0px 3px;
}

/*Kolom sebelah kanan untuk membuat tampilan reward dan highlight*/
.container .colm .top-colm .right {
	float: right;
	width: 292px;
	height: autopx;
	margin:0px;
}

.container .colm .top-colm .right .reward-area {
	float: right;
	width: 287px;
	height: auto;
	margin: 1px 3px 0px 1px;
	background: url(../image/bgjudul.png) top no-repeat;
}

.container .colm .top-colm .right .highlight-area {
	float: right;
	width: 287px;
	height: 265px;
	margin: 1px 3px 0px 1px;
	background: url(../image/bgjudul.png) top no-repeat;
}

/*===================================================================================
=====================================================================================*/

/*Membuat Tampilan Slide Berita dan Berita Populer*/
.container .colm .middle-colm {
	float: left;
	width: 970px;
	height: auto;
	margin-top:1px;
	border: 0px solid #3C0;
}

/*Membuat Tampilan Slide Berita*/
.container .colm .middle-colm .news-slide {
	float: left;
	width: 668px;
	height: 285px;
	margin: 1px 0px 5px 3px;
	border: 0px solid #3FC;
	background: #FFF url(../image/bn.png) bottom repeat-x;
}

/*Membuat Tampilan Berita Populer*/
.container .colm .middle-colm .news-popoler {
	float: right;
	width: 287px;
	height: auto;
	margin: 1px 3px 0px 1px;
	background: url(../image/bgjudul.png) top no-repeat;
}

/*Membuat Tampilan Berita Terkait, Iklan kecil, iklan sedang dan Higlight Iklan(slide Iklan)*/
.container .colm .bottom-colm {
	float: left;
	width: 970px;
	height: 275px;
	margin-top:1px;
}

/*Membuat Tampilan Berita Terkait dan Iklan*/
.container .colm .bottom-colm .left {
	float: left;
	width: 400px;
	height: 265px;
	margin: 1px 2px 0px 3px;
}

/*Membuat Tampilan Berita Terkait*/
.container .colm .bottom-colm .left .related-news {
	float: left;
	width: 400px;
	height: 140px;
	margin: 1px 0px 0px 0px;
	background: url(../image/bgjudul2.png) top repeat-x;
}

/*Membuat Tampilan Iklan bagian bawah*/
.container .colm .bottom-colm .left .advertising {
	width: 400px;
	height: 117px;
	margin: 5px 0px 0px 0px;
}

/*Membuat Tampilan iklan sedang*/
.container .colm .bottom-colm .reclame {
	float: left;
	width: 260px;
	height: 265px;
	margin: 1px 0px 0px 7px;
}

/*Membuat Tampilan Higlight Iklan(slide Iklan)*/
.container .colm .bottom-colm .highlight {
	float: right;
	width: 287px;
	height: 265px;
	margin: 1px 3px 0px 0px;
	background: url(../image/bgjudul.png) top no-repeat;
}

/*Membuat Tampilan Informasi alamat, member group pj, hits(jumlah pengunjung)*/
.container .colm .information-colm {
	float: left;
	width: 970px;
	height: auto;
	margin-top:1px;
	background: url(../image/background.png);
}

/*Membuat Tampilan =Informasi alamat*/
.container .colm .information-colm .address {
	float: left;
	width: 320px;
	height: auto;
	margin: 1px 10px 0px 3px;
	border: 0px solid #F00;
	background: url(../image/bgjudul2.png) top repeat-x;
}
                    
/*Membuat Tampilan member group pj*/
.container .colm .information-colm .group {
	float: left;
	width: 390px;
	height: auto;
	margin: 1px 0px 0px 3px;
	border: 0px solid #f00;
	background: url(../image/bgjudul2.png) top repeat-x;
}
                    
/*Membuat Tampilan hits(jumlah pengunjung)*/
.container .colm .information-colm .statistic {
	float: right;
	width: 230px;
	height: auto;
	margin: 1px 3px 0px 1px;
	border: 0px solid #f00;
	background: url(../image/bgjudul2.png) top repeat-x;
}

/*Membuat Tampilan Footer Web*/
.footer {
	width: auto;
	height: 30px;
	margin: 0 auto;
	/*background:url(../image/footer.png);*/
	background: -moz-linear-gradient( center top, white 20%, #36AFFF 100% ); 
	background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #36AFFF));
}

.footer .copy {
	width: 970px;
	height: 30px;
	margin: 0 auto;
}

.footer .copy .tl {
	padding-top:12px;
	text-align:center;
	color: #333;
	font-weight:bold;
	font: small "Courier New", Courier, monospace;
}

/*========================================================================================================================================

STYLE untuk judul, isi, dan mengaturan lainnya

========================================================================================================================================*/

/*Membuat Tulisan Sub Judul*/
.sub-title {
	width:280px;
	height:25px;
	text-align: right;
	font: small "Courier New", Courier, monospace;
	color:#000;
	margin-top:4px;
}

.sub-title2 {
	width:280px;
	height:25px;
	text-align:left;
	font: small "Courier New", Courier, monospace;
	color:#000;
	margin:4px 0px 0px 4px;
}

.sub-title-footer {
	width: auto;
	height:25px;
	text-align:left;
	font: small "Courier New", Courier, monospace;
	color:#000;
	font-weight:bold;
	margin:6px 0px 0px 4px;
}

/*Membuat Tampilan list berita populer dan berita terkait*/

.tulisan {
	font: small Tahoma, Geneva, sans-serif;
	padding: 0px;
	text-align:justify;
}

/*Membuat style untuk judul dan tulisan di text-area bagian isi, berita, galery dan lainnya*/

.title-ta {
	font: small Tahoma, Geneva, sans-serif;
	padding: 10px 0px 0px 0px;
	text-align:justify;
	font-weight:bold;
}

.content-ta {
	font: small Arial, Helvetica, sans-serif;
	padding: 0px;
	text-align:justify;
}

.content-ta p {
	text-indent:30px;
	line-height:25px;
}

.content-ta img {
	float:left;
}

.content-ta img.reward {
	float:left;
	margin:10px 40px 10px 0px;
}


/*Membuat style gambar reward*/
.reward-image {
	margin-bottom:7px;
}

/*Membuat alamat head office dan statistik*/
.text-footer {
	font: small "Palatino Linotype", "Book Antiqua", Palatino, serif;
	margin: 2px 0px 0px 5px;
}

.text-news {
	font: small Tahoma, Geneva, sans-serif;
	color:#000;
	text-align:justify;
}

/*Membuat Tampilan list berita populer*/
ul.newspopoler-list {
	width:275px;
	position:relative;
	padding:0px 0px 0px 5px;
	margin:0px 0px 0px 0px;
	font-size:12px;
	list-style:none;
	border:0px solid #009;
}
ul.newspopoler-list li a{
	font-size:12px;
	display:block;
	overflow:hidden;
	padding:3px 0px 3px 15px;
	line-height:23px;
	text-decoration:none;
	color:#000;
	background: url(../image/icon.png) center left no-repeat;
}
ul.newspopoler-list li a:hover{
	color:#666;
	text-decoration:inherit;
	background: url(../image/iconhov.png) center left no-repeat; 
	margin-left:3px;
}

/*Membuat Tampilan list berita terkait*/

ul.newsrelated-list {
	width:395px;
	position:relative;
	padding:0px 0px 0px 5px;
	margin:0px 0px 0px 0px;
	font-size:12px;
	list-style:none;
	border:0px solid #009;
}
ul.newsrelated-list li a{
	font-size:12px;
	display:block;
	overflow:hidden;
	padding:3px 0px 3px 15px;
	line-height:23px;
	text-decoration:none;
	color:#000;
	background: url(../image/icon.png) center left no-repeat;
}
ul.newsrelated-list li a:hover{
	color:#666;
	text-decoration:inherit;
	background: url(../image/iconhov.png) center left no-repeat; 
	margin-left:3px;
}

/*membuat style untuk tampilan galery*/
.content-galery {
	font: small Tahoma, Geneva, sans-serif;
	color:#000;
	padding: 10px;
	background: url(../image/bb.png) bottom repeat-x;
}

.content-galery img {
	color:#000;
	padding: 9px;
	margin-bottom: 5px;
	background: url(../image/bb2.png) top repeat-x;
	border: 1px dotted #999;
	-moz-border-radius:10px;
    -webkit-border-radius:10px;	
}
.content-galery img:hover {
	opacity:0.5; filter:alpha(opacity=50%);
}



