/*FONT DEFINING*/
@font-face { font-family: 'titillium'; font-style: normal; font-weight: 400; src: url("../fonts/TitilliumWeb-Regular.eot"); src: local("Titillium Web"), local("TitilliumWeb-Regular"), url("../fonts/TitilliumWeb-Regular.eot") format("embedded-opentype"), url("../fonts/TitilliumWeb-Regular.woff") format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }
@font-face { font-family: 'titillium'; font-style: normal; font-weight: 600; src: url("../fonts/TitilliumWeb-SemiBold.eot"); src: local("Titillium WebSemiBold"), local("TitilliumWeb-SemiBold"), url("../fonts/TitilliumWeb-SemiBold.eot") format("embedded-opentype"), url("../fonts/TitilliumWeb-SemiBold.woff") format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }
@font-face { font-family: 'titillium'; font-style: normal; font-weight: 700; src: url("../fonts/TitilliumWeb-Bold.eot"); src: local("Titillium WebBold"), local("TitilliumWeb-Bold"), url("../fonts/TitilliumWeb-Bold.eot") format("embedded-opentype"), url("../fonts/TitilliumWeb-Bold.woff") format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }
/*GLOBAL RESET*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; position: relative; }

ul, ol { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { /*border-bottom:1px dotted;*/ cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ul, ol { /*margin-left: 1.8em;*/ }

ol { list-style-type: decimal; }

nav ul, nav li { margin: 0; }

small { font-size: 85%; }

strong { font-weight: bold; }

td, td img { vertical-align: top; }

sub { vertical-align: sub; font-size: smaller; }

sup { vertical-align: super; font-size: smaller; }

pre { padding: 15px; }

pre, code { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 dan 2.1*/ word-wrap: break-word; /* IE */ }

input, select { vertical-align: middle; }

.ie6 input { vertical-align: text-bottom; }

textarea { overflow: auto; }

input[type="radio"] { vertical-align: middle; }

input[type="checkbox"] { vertical-align: middle; }

.ie7 input[type="checkbox"] { vertical-align: middle; }

label, input[type=button], input[type=submit], button { cursor: pointer; }

button, input, select, textarea { margin: 0; padding: 0; border: 0; background: none; }

input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }

.ie7 img { -ms-interpolation-mode: bicubic; }

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

img { border: none; vertical-align: bottom; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; color: inherit; transition: color 0.1s linear; -moz-transition: color 0.1s linear; -webkit-transition: color 0.1s linear; }

a:link, a:hover, a:visited { text-decoration: none; outline: none; color: inherit; }

a:hover { color: #d42329; }

p { padding-bottom: 15px; }

td, th { text-align: left; vertical-align: middle; line-height: 120%; }

[onclick] { cursor: pointer; }

label { line-height: 150%; }

.reset { clear: both !important; }

input[type='text'] , input[type='password'] , select , textarea
	{
		padding:5px 10px 5px 5px; border:1px solid #bbb; 
		box-shadow: 0 0px 3px #eee inset; -moz-box-shadow: 0 0px 3px #eee inset; -webkit-box-shadow: 0 0px 3px #eee inset;
		transition: border 0.5s linear 0s, box-shadow 1s linear 0s; -moz-transition: border 0.5s linear 0s, box-shadow 1s linear 0s; -webkit-transition: border 0.5s linear 0s, box-shadow 1s linear 0s;
		border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px;
	}
	
input[type='text']:hover , input[type='password']:hover , select:hover , textarea:hover
	{
		border:1px solid #666; 
		box-shadow: 0 0px 3px #ccc inset; -moz-box-shadow: 0 0px 3px #ccc inset; -webkit-box-shadow: 0 0px 3px #ccc inset;
	}
	
input[type='text']:focus , input[type='password']:focus , select:focus , textarea:focus
	{
		border-color:#c70607;
		box-shadow: 0 0px 3px rgba(199, 6 , 7 , 0.5);
		outline:0 none;
	}
	
select{padding-right:3px;}

::-webkit-input-placeholder {
	color: #777; font-family:arial;
}

:-moz-placeholder {
	color: #777; font-family:arial;
}

::-moz-placeholder {
	color: #777; font-family:arial;
}

:-ms-input-placeholder {  
	color: #777; font-family:arial;
}

input[type="submit"]{display:block; border:none; background:none;}


h1, h2, h3, h4, h5, h6 { font-size: 100%; text-decoration: none; display: inline; font-weight: inherit; }

/*clear HEADINGS , fonts , etc*/
h1, h2, h3, h4, h5, h6 { font-size: 100%; text-decoration: none; display: inline; font-weight: inherit; }

.hedingred{color: #D42329;}
.headingwh{color: #fff;} /* bagaian coloor */
.headingblk{color: #000;}
.headingabu{color: #777;}
.hide{display:none;}

/*FONT STYLE*/
.fBold { font-weight: bold !important; }
article-content
.fItalic { font-style: italic !important; }

.upC { text-transform: uppercase !important; }

/*FONT SIZE*/
.fS10 { font-size: 10px; }

.fS11 { font-size: 11px; }

.fS12 { font-size: 12px; }

.fS13 { font-size: 13px; }

.fS14 { font-size: 14px; }

.fS16 { font-size: 16px; }

.fS18 { font-size: 18px; }

.fS20 { font-size: 20px; }

.fS22 { font-size: 22px; }

.fS24 { font-size: 24px; }

.fS26 { font-size: 26px; }

/*LINE_HEIGHT*/
.lh100 { line-height: 100%; }

.lh120 { line-height: 120%; }

.lh150 { line-height: 150%; }

.lh200 { line-height: 200%; }

/*TEXT ALIGN*/
.txC { text-align: center; }

.txJ { text-align: justify; }

.txR { text-align: right; }

.font-titillium, .button2 , .page-nav, .gallerybox .titlebar, .gallerybox .thumbcontainer .captionbox .title, form label,  .rollHeadlines .viewcontainer .slides li .desc .title, .newslist.nl1 li .title, .newslist.nl2, .newslist.nl3 li .title, .newslist.nl4 > li .title, .newslist.nl5 > li .title, .newslist.trilist > .list, .page-footer .explore .titlebar, .page-footer .explore .channel-title, .page-footer .bottomlinks .links, .titlebar.t1, .titlebar.t2, .titlebar.t3, .titlebar.t4, .titlebar.skewed, .titlebar.kanalpage, .momentum, .tag-popular a, .side-tag-populer .container, .article-detail .upperdeck, .article-detail .title, .article-detail .summary, .fokus li, .fokus .morelink, .sorot .edition, .sorot .title, .sorot .inflink, .boxstack a.overlay .caption .title, .boxstack .quickread.trigger, .boxlist .col a.overlay .caption .title, .boxlist .col a.overlay .subkanal, .boxlist .col .quickread.trigger, .boxheadline a.overlay .caption .title, .boxheadline .quickread.trigger, .gheadline .desc .topic, .gheadline .desc .title, .greyboxlist li .desc .title, .gheadline2 .kanaltitle, .gheadline2 .main .title, .indeks-selector .selector-container select, .fokus_indeks .indeks-selector .label, .fokus_indeks .listindeks ul > li .title, .sorothead, .sorot_indeks .indeks-selector .label, .sorot_indeks .listindeks, .sorot_terpopuler , .titlebar.t5 , .indexlist li .title , .quickread-module .close_btn , .quickread-module .title , .search-desc .keyword{ font-family: titillium, "arial narrow" , arial; font-stretch: condensed; }

/*GLOBAL STYLES*/
body { font: normal 14px/1.4 helvetica , arial , sans-serif; color: #333; }

.thumbcontainer { position: relative; overflow: hidden; }
.thumbcontainer img { width: 100%;}

.fr { float: right; }

.fl { float: left; }

.p5 { padding: 5px; }

.p10 { padding: 10px; }

.p15 { padding: 15px; }

.p20 { padding: 20px; }

.p25 { padding: 25px; }

.p30 { padding: 30px; }

.p35 { padding: 35px; }

.p40 { padding: 40px; }

.p45 { padding: 45px; }

.p50 { padding: 50px; }

.clearfix:before, .grid:before, .row:before, .page-header .topbar .smicons:before, .gallerybox .titlebar:before, .gallerybox .thumblist:before, .newslist.nl1 li:before, .newslist.nl3 li:before, .newslist.trilist:before, .page-footer .explore .block-list:before, .page-footer .bottomlinks:before, .page-footer .bottomlinks .links:before, .momentum .momentumlist li > a:before, .pagination:before, .article-detail .smalldesc:before, .fokus li:before, .boxlist:before, .boxheadline:before, .boxheadline .col:before, .clearfix:after, .grid:after, .row:after, .page-header .topbar .smicons:after, .gallerybox .titlebar:after, .gallerybox .thumblist:after, .newslist.nl1 li:after, .newslist.nl3 li:after, .newslist.trilist:after, .page-footer .explore .block-list:after, .page-footer .bottomlinks:after, .page-footer .bottomlinks .links:after, .momentum .momentumlist li > a:after, .pagination:after, .article-detail .smalldesc:after, .fokus li:after, .boxlist:after, .boxheadline:after, .boxheadline .col:after { content: "\0020"; display: block; height: 0; visibility: hidden; }

.clearfix:after, .grid:after, .row:after, .page-header .topbar .smicons:after, .gallerybox .titlebar:after, .gallerybox .thumblist:after, .newslist.nl1 li:after, .newslist.nl3 li:after, .newslist.trilist:after, .page-footer .explore .block-list:after, .page-footer .bottomlinks:after, .page-footer .bottomlinks .links:after, .momentum .momentumlist li > a:after, .pagination:after, .article-detail .smalldesc:after, .fokus li:after, .boxlist:after, .boxheadline:after, .boxheadline .col:after { clear: both; }

.clearfix, .grid, .row, .page-header .topbar .smicons, .gallerybox .titlebar, .gallerybox .thumblist, .newslist.nl1 li, .newslist.nl3 li, .newslist.trilist, .page-footer .explore .block-list, .page-footer .bottomlinks, .page-footer .bottomlinks .links, .momentum .momentumlist li > a, .pagination, .article-detail .smalldesc, .fokus li, .boxlist, .boxheadline, .boxheadline .col { zoom: 1; }

.h5 { height: 5px; }

.h10 { height: 10px; }

.h15 { height: 15px; }

.h20 { height: 20px; }

.h25 { height: 25px; }

.h30 { height: 30px; }

.h35 { height: 35px; }

.h40 { height: 40px; }

.h45 { height: 45px; }

.h50 { height: 50px; }

.grid { position: relative; }
.grid.center { margin-left: auto; margin-right: auto; }
.grid.w300 { width: 300px; }
.grid.w663 { width: 663px; }

	.grid.full { width: 975px; }
	.grid.colA { width: 663px; float: left; }
	.grid.colA .colA-1 { width: 325px; float: left; }
	.grid.colA .colA-2 { width: 325px; float: right; }
	.grid.colA .colA-3 { width: 200px; float: left; }
	.grid.colA .colA-4 { width: 450px; float: right; }
	.grid.colB { width: 300px; float: right; }
	.grid.half { width: 480px; } 
	.disp { display: none; }


	.disp.a { display: block; } 



.button { cursor: pointer; display: block; -moz-user-select: none; outline: 0 none; text-align: center; white-space: nowrap; height: 28px; line-height: 28px; min-width: 40px; padding: 0 8px; font: 600 16px titillium; }
.button.grey { background-color: #f8f8f8; border: 1px solid #dcdcdc; color: #555; background-image: linear-gradient(top, #f5f5f5, #f1f1f1); }
.button.grey:hover { border-color: #c6c6c6; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); background-image: linear-gradient(top, #f8f8f8, #f1f1f1); }
.button.red { background-color: #d32129; border: 1px solid #b90b13; color: #fff; background-image: linear-gradient(top, #d32129, #b90b13); }
.button.red:hover { border-color: #9f080f; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); background-image: linear-gradient(top, #b90b13, #9f080f); }
.button:active, .button:focus { -webkit-box-shadow: inset 0 1px 2px black; box-shadow: inset 0 1px 2px black; }
.button.large { font-size: 18px; height: 36px; line-height: 36px; }
.button.medium { font-size: 14px; height: 30px; line-height: 30px; }
.button.small { font-size: 12px; height: 20px; line-height: 20px; }

.button2 { display: inline-block; position: relative; background-color: #8d2079; color: #fff !important; cursor: pointer; font-weight: 600; text-align: left; padding: 0 4em 0 1em; }
.button2.large { font-size: 20px; height: 45px; line-height: 45px; }
.button2.medium { font-size: 16px; height: 36px; line-height: 36px; }
.button2.small { font-size: 14px; height: 30px; line-height: 30px; }
.button2:after { position: absolute; content: ""; top: 0; bottom: 0; right: 0; width: 15%; background-color: #a33f91; transition: width 0.7s; }
.button2:hover:after { transition: width 0.7s; width: 20%; cursor: pointer; }
.button2:before { content: ">"; position: absolute; right: 10px; top: 0; z-index: 99; font-weight: 400; line-height: .9; font-size: 200%; }

.portlet { margin-bottom: 15px; }

.searchbar { position: relative; }
.searchbar .searchinput { width: 200px; border: 1px solid #c00; height: 30px; padding: 0 40px 0 10px; line-height: 30px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -webkit-transition: box-shadow, 0.2s; -moz-transition: box-shadow, 0.2s; -ms-transition: box-shadow, 0.2s; -o-transition: box-shadow, 0.2s; transition: box-shadow, 0.2s; }
.searchbar .searchinput:focus { -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); }
.searchbar .searchinput:focus, .searchbar .searchinput:hover { border-color: #aaa; }
.searchbar .searchsubmit { position: absolute; top: 0; right: 5px; height: 0; width: 30px; padding-top: 30px; background: url("../img/element/sprite.png") -80px 0 no-repeat transparent; }
.searchbar .searchsubmit:hover { background-position: -110px 0; }

.page-header { position: fixed; top: 0; width: 100%; z-index: 9999; }
.page-header .topbar > .container { height: 60px; background-color: #fff; }
.page-header .topbar .logo { display: block; position: absolute; top: 0; left: 0; }
.page-header .topbar .searchbar { position: absolute; top: 15px; left: 250px; }
.page-header .topbar .searchbar .searchinput { width: 300px; }

.page-header .topbar .smicons { position: absolute; top: 20px; right: 10px; }
.page-header .topbar .smicons > li { float: left; margin-left: 20px; }
.page-header .topbar .timeset { font-size: 12px; position: absolute; top: 20px; right: 200px; color: #999; }

.leaderboard { padding: 5px 0; background-color: #fff; }
.leaderboard .container { width: 728px; height: 90px; overflow: hidden; margin-right: auto; margin-left: auto; }

.fullbelt .container { margin-right: auto; margin-left: auto; width: 975px; height: 100px; overflow: hidden; margin-bottom: 10px; }

.bottomframe { position: fixed; width: 100%; bottom: 0; z-index: 99999; }
.bottomframe .container { width: 975px; height: 40px; margin-right: auto; margin-left: auto; position:relative; background: white;}
.bottomframe  .close_btn , .otp .close_btn{display:block; height:25px; padding:0 25px 0 15px; font:bold 16px/25px titillium; color:#fff; position:absolute; top:-25px; right:0; background:url('../img/element/close_btn.png') right center no-repeat #000; z-index:999999;}
	.bottomframe  .close_btn:hover , .otp .close_btn:hover{background-color:#f00;}

.headergap { height: 98px; }
.gap{height: 10px;}

.smicons .icon { display: block; background: url("../img/element/sprite.png") 0 0 no-repeat transparent; height: 20px; width: 20px; }
.smicons .icon.fb { background-position: 0 0; }
.smicons .icon.fb:hover { background-position: 0 -20px; }
.smicons .icon.twt { background-position: -20px 0; }
.smicons .icon.twt:hover { background-position: -20px -20px; }
.smicons .icon.gplus { background-position: -40px 0; }
.smicons .icon.gplus:hover { background-position: -40px -20px; }
.smicons .icon.acc { background-position: -60px 0; }
.smicons .icon.acc:hover { background-position: -60px -20px; }
.smicons .icon.ig {background-position: -160px -183px;}
.smicons .icon.ig:hover {background-position: -140px -183px;}

.page-nav > .container { border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d42329; height: 36px; -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); background-color: #fbfbfb; }
.page-nav .list-container > li { float: left; position: relative; }
.page-nav .list-container > li > a { display: block; font-weight: 600; border-right: 1px solid #d0d0d0; line-height: 36px; text-align: center; color: #333; -webkit-transition: line-height 0.1s; -moz-transition: line-height 0.1s; -ms-transition: line-height 0.1s; -o-transition: line-height 0.1s; transition: line-height 0.1s; font-size: 16px; }
.page-nav .list-container > li > a.link:hover, .page-nav .list-container > li > a.link.on { line-height: 32px; border-bottom: 5px solid #e60000; }
.page-nav .list-container > li.vnews > a { border-left: 1px solid #d0d0d0; }
.page-nav .list-container > li.vnews .subkanal li > a:hover { background-color: #d42329; }
.page-nav .list-container > li.vbola > a:hover { border-bottom-color: #339900; }
.page-nav .list-container > li.vbola .subkanal li > a:hover { background-color: #339900; }
.page-nav .list-container > li.vlife > a:hover { border-bottom-color: #fd0077; }
.page-nav .list-container > li.vlife .subkanal li > a:hover { background-color: #fd0077; }
.page-nav .list-container > li.vlog > a:hover { border-bottom-color: #8d2079; }
.page-nav .list-container > li.vlog .subkanal li > a:hover { background-color: #8d2079; }
.page-nav .list-container > li.vforum > a:hover { border-bottom-color: #3173a7; }
.page-nav .list-container > li.vforum .subkanal li > a:hover { background-color: #3173a7; }
.page-nav .list-container > li .sublist-container { position: absolute; top: 35px; display: none; z-index: 9999; -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); }
.page-nav .list-container > li .sublist-container li > a { display: block; color: #fff; font-size: 16px; padding: 0 10px; min-width: 150px; font-size: 16px; line-height: 30px; padding: 0 10px; min-width: 150px; }
.page-nav .list-container > li .sublist-container.subkanal { left: 0; padding-top: 1px; }
.page-nav .list-container > li .sublist-container.subkanal li > a { color: #fff; background-color: rgba(0, 0, 0, 0.7); line-height: 30px; }
.page-nav .list-container > li .sublist-container.morekanal { right: 0; border: 1px solid #d0d0d0; }
.page-nav .list-container > li .sublist-container.morekanal li > a { color: #333; background-color: #fbfbfb; font-weight: 600; text-align: right; line-height: 35px; }
.page-nav .list-container > li .sublist-container.morekanal li > a:hover { border-right: 5px solid #e60000; padding-right: 5px; background-color: #eaeaea; color: #000; }
.page-nav .list-container > li:hover .sublist-container { display: block; }
.page-nav .list-container.float { position: absolute; top: 0; right: 0; z-index: 9999; }
 .page-nav .list-container > li { width: 110px; }
  .page-nav .list-container.static { width: 800px; }
  .page-nav .list-container.static > li:nth-child(n+8) { display: none; }
  .page-nav .morekanal > li:nth-child(-n+6) { display: none; } 

/*.skinframe { position: fixed; height: 0; overflow: visible; width: 100%; top: 100px; z-index:99999;}
.skinframe .container { position: absolute; width: 160px; height: 600px; top: 0; }
.skinframe .container.left { left: -170px; }
.skinframe .container.right { right: -170px; }
.skinframe .close_btn{display:block; height:25px; padding:0 25px 0 15px; font:bold 16px/25px titillium; color:#fff; position:absolute; top:-25px; right:0; background:url('../img/element/close_btn.png') right center no-repeat #000; z-index:999999;}
	.skinframe .close_btn:hover{background-color:#f00;} */

.skinframe.fixed { position: fixed; height: 0; overflow: visible; width: 100%; top: 100px; z-index:9999;}
.skinframe {height: 0; overflow: visible; width: 100%; top: -100px; z-index:9999;}
.skinframe .container, .skinframe.fixed .container { position: absolute; width: 160px; height: 600px; top: 0; z-index:9999;}
.skinframe .container.left, .skinframe.fixed .container.left { left: -170px; }
.skinframe .container.right { right: -170px; }
.skinframe .close_btn, .skinframe.fixed .close_btn {display:block; height:25px; padding:0 25px 0 15px; font:bold 16px/25px titillium; color:#fff; position:absolute; top:-25px; right:0; background:url('../img/element/close_btn.png') right center no-repeat #000; z-index:999999;}
	.skinframe .close_btn:hover, .skinframe.fixed .close_btn:hover{background-color:#f00;}

.gallerybox .titlebar { background-color: #000; color: #fff; line-height: 50px; height: 50px; padding: 0 10px; }
.gallerybox .titlebar .red { color: #c00; }
.gallerybox .titlebar .text { font-size: 40px; font-weight: bold; float: left; }
.gallerybox .titlebar .morelink { font-size: 20px; display: block; float: right; }
.gallerybox .thumbcontainer { display: block; }
.gallerybox .thumbcontainer .overlayicon { opacity: 0.5; -moz-opacity: 0.5; -webkit-opacity: 0.5; -o-opacity: 0.5; filter: alpha(opacity=50); position: absolute; z-index: 99; }
.gallerybox .thumbcontainer .overlayicon img { width: 100%; }
.gallerybox .thumbcontainer:hover .overlayicon { opacity: 0.7; -moz-opacity: 0.7; -webkit-opacity: 0.7; -o-opacity: 0.7; filter: alpha(opacity=70); }
.gallerybox .thumbcontainer .captionbox { position: absolute; width: 100%; bottom: 0; left: 0; background: url("../img/element/gradoverlay.png") repeat-x center top; color: #fff; }
.gallerybox .thumbcontainer .captionbox .container { padding: 30px 20px 10px; }
.gallerybox .thumbcontainer .captionbox .title { font-size: 16px; line-height: 18px; font-weight: 600; }
.gallerybox .main .captionbox .container { padding: 30px 20px 10px; }
.gallerybox .main .captionbox .title { font-size: 30px; line-height: 34px; }
.gallerybox .thumblist { width: 100%; }
.gallerybox .thumblist > li { float: left; }
.gallerybox .thumblist .captionbox .container { padding: 20px 10px 10px; }
.gallerybox .thumblist .captionbox .title { font-size: 16px; line-height: 18px; }
.gallerybox.half .titlebar { line-height: 30px; height: 30px; padding: 0 10px; }
.gallerybox.half .titlebar .text { font-size: 20px; }
 .gallerybox.half .main .thumbcontainer .overlayicon { width: 80px; top: 50px; left: 200px; }
  .gallerybox.half .thumblist { overflow: hidden; height: 90px; }
  .gallerybox.half .thumblist > li { width: 33.33%; }
  .gallerybox.half .thumblist .overlayicon { width: 30px; top: 10px; left: 65px; }
  .gallerybox.half .thumblist .captionbox .title { font-size: 14px; line-height: 16px; } 
.gallerybox .main .thumbcontainer .overlayicon { width: 150px; top: 175px; left: 412px; }
  .gallerybox .thumblist > li { width: 20%; }
  .gallerybox .thumblist .overlayicon { width: 50px; top: 10px; left: 70px; } 


.rollHeadlines { width: 100%; overflow: hidden; }
.rollHeadlines .viewcontainer #tombolPlayPause, .rollHeadlines .viewcontainer #tombolPrev, .rollHeadlines .viewcontainer #tombolNext { display: none; }
.rollHeadlines .viewcontainer .slides, .rollHeadlines .viewcontainer .slides li { width: 100%; height: 454px; }
.rollHeadlines .viewcontainer .slides li { position: relative; overflow: hidden; }
.rollHeadlines .viewcontainer .slides li .displayimg { height: 100%; }
.rollHeadlines .viewcontainer .slides li .desc { color: #fff; width: 50%; position: absolute; right: 0; bottom: 30px; }
.rollHeadlines .viewcontainer .slides li .desc .title { font-weight: 600; margin-bottom: 5px; font-size: 28px; line-height: 36px; text-shadow: 0 0 3px #593d67; }
.rollHeadlines .viewcontainer .slides li .desc .container { padding: 20px; background-color: rgba(0, 0, 0, 0.5); }
.rollHeadlines .viewcontainer #slideList { position: absolute; bottom: 10px; left: 10px; }
.rollHeadlines .viewcontainer #slideList li { float: left; margin-right: 5px; border: 1px solid #fff; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
.rollHeadlines .viewcontainer #slideList li a { display: block; padding-top: 16px; height: 0; overflow: hidden; width: 16px; }
.rollHeadlines .viewcontainer #slideList li.tampil a { background-color: #fff; }

.singleHeadline { }
.singleHeadline .thumbcontainer{width:663px; height:373px;}
.singleHeadline .desc{margin-top:15px; color:#333;}
.singleHeadline .desc .upperdeck{ color: #999; font-size: 12px;}
.singleHeadline .desc .title{font:bold 22px/26px titillium; margin:5px 0;}

.newslist.nl1 li { border-bottom: 1px dotted #999; padding: 10px 0; line-height: 1.2; }
.newslist.nl1 li:last-child { border: none; }
.newslist.nl1 li .thumbcontainer { width: 40%; float: left; margin-right: 10px; }
.newslist.nl1 li .upperdeck { font-size: 11px; font-weight: bold; color: #e60000; }
	.newslist.nl1 li .upperdeck.vnews{color:#e6000;} .newslist.nl1 li .upperdeck.vlife{color:#FD0077;} .newslist.nl1 li .upperdeck.vbola{color:#390;} .newslist.nl1 li .upperdeck.vlog{color:#8D2079;}
.newslist.nl1 li > a { display: block; }
.newslist.nl2 { padding: 10px; background-color: #f0f0f0; font-size: 15px; }
.newslist.nl2 li { border-bottom: 1px dotted #999; padding: 10px 0;  }
.newslist.nl2 li .thumbcontainer { width: 35%; float: left; margin-right: 10px; }
.newslist.nl2 li:last-child { border: none; }
.newslist.nl2 li > a { display: block; }
.newslist.nl3 li { border-bottom: 1px dotted #999; padding-bottom: 10px; margin-bottom: 10px; line-height: 1.2; }
.newslist.nl3 li:last-child { border: none; }
.newslist.nl3 li .upperdeck { font-size: 11px; font-weight: bold; color: #e60000; }
.newslist.nl3 li .thumbcontainer { width: 40%; float: left; margin-right: 10px; }
.newslist.nl3 li.main { text-align: center; }
.newslist.nl3 li.main .thumbcontainer { width: 100%; float: none; margin-bottom: 5px; }
.newslist.nl3 li.main .upperdeck { font-size: 12px; font-weight: bold; color: #e60000; }
.newslist.nl3 li.main .title { font-size: 16px; font-weight: 600; }
.newslist.nl4 > li { border-bottom: 1px dotted #999; }
.newslist.nl4 > li > a { display: block; padding: 7px 0; }
.newslist.nl4 > li .title { font-weight: 600; }
.newslist.nl4 > li.main .title { font-size: 16px; padding: 3px 0; }
.newslist.nl4 > li.main .summary { color: #777; font-size: 13px; }
.newslist.nl5 > li { padding-bottom: 15px; }
.newslist.nl5 > li .thumbcontainer { margin-bottom: 5px; }
.newslist.nl5 > li .upperdeck { font-weight: bold; font-size: 10px; color: #d42329; }
.newslist.nl5 > li .title { font-weight: 600; font-size: 13px; }
.newslist.trilist > .list { width: 210px; float: left; margin:0 16px 16px 0; font-weight: 600; font-size: 15px; line-height:18px; height:180px; overflow:hidden;}
.newslist.trilist > .list:nth-child(3n+3) { margin-right: 0; }
.newslist.trilist > .list .overlayicon { position: absolute; z-index: 999; bottom: 10px; right: 10px; opacity: .5; width: 40px; }
.newslist.trilist > .list .overlayicon img { width: 100%; }
.newslist.trilist > .list:hover .overlayicon { opacity: 1; }

.rekomendasi { background-color:#F3F3D5; margin-top:25px;}
.newslist.fourlist { width:100%; padding:0 8px 0 8px;}
.newslist.fourlist > .list { width: 146px; float: left; margin:0 8px 16px 8px; font-weight: 600; font-size: 15px; line-height:18px; height:160px; overflow:hidden; font-family:titillium;}

.banner-redaksi { width: 663px; }

.article-quot { width: 250px; padding:15px; font-size:24px; font-weight:bold; color:#676767; font-style:italic; line-height:29px; text-align:center; float:left; margin:0 15px 15px 0; font-family:titillium; border-top:solid 6px #676767; border-bottom:solid 2px #676767; }

.quickread-module{width:100%; height:100%; top:0; bottom:0; left:0; right:0; position:fixed; z-index:99999; } 
	.quickread-module.overlay{ background-color: rgba(0, 0, 0, 0.8);}
.quickread-module .container{width:663px; height:500px; position:absolute; overflow:visible; background-color:#fff; top:50%; left:50%; margin-left:-331px; margin-top:-250px; padding:10px; box-shadow:0 0 3px #000;}
.quickread-module .close_btn{display:block; height:25px; padding:0 25px 0 15px; font:bold 16px/25px titillium; color:#fff; position:absolute; top:-25px; right:0; background:url('../img/element/close_btn.png') right center no-repeat #000;}
	.quickread-module .close_btn:hover{background-color:#f00;}
.quickread-module .container .left{width:340px; float:left; height:100%;}
	.quickread-module .container .right{width:300px; float:right; padding-left:10px; border-left:1px solid #999; height:100%;}
.quickread-module .title { font-size: 22px; font-weight: bold; line-height:30px; padding:10px 0; max-height:60px; overflow:hidden;}
	.quickread-module .content{ max-height:190px; overflow:hidden;}
	.quickread-module .morelink{display:block; color:#c00; font:600 16px/20px titillium; margin-top:15px;}
	.quickread-module .morelink:hover{text-decoration:underline;}

.channelblock .titlebar { padding: 10px 0; border-bottom: 3px solid #c00; }
.channelblock .titlebar .logo { display: block; height: 50px; margin: 0 auto; }
.channelblock .subkanal { font-size: 12px; font-weight: bold; font-variant-caps: all-petite-caps; }
.channelblock > .container { margin-bottom: 5px; }
.channelblock.vnews .titlebar { border-color: #d42329; }
.channelblock.vnews .titlebar .logo { background: url("../img/element/sprite.png") 0 -40px no-repeat transparent; width: 114px; }
.channelblock.vnews.small .main .subkanal, .channelblock.vnews .sub .subkanal { color: #d42329; }
.channelblock.vbola .titlebar { border-color: #339900; }
.channelblock.vbola .titlebar .logo { background: url("../img/element/sprite.png") 0 -90px no-repeat transparent; width: 110px; }
.channelblock.vbola.small .main .subkanal, .channelblock.vbola .sub .subkanal { color: #339900; }
.channelblock.vlife .titlebar { border-color: #fd0077; }
.channelblock.vlife .titlebar .logo { background: url("../img/element/sprite.png") 0 -120px no-repeat transparent; width: 95px; }
.channelblock.vlife.small .main .subkanal, .channelblock.vlife .sub .subkanal { color: #fd0077; }
.channelblock.vlife .titlebar { border-color: #fd0077; }
.channelblock.vlife .titlebar .logo { background: url("../img/element/sprite.png") 0 -140px no-repeat transparent; width: 95px; }
.channelblock.vlife.small .main .subkanal, .channelblock.vlife .sub .subkanal { color: #fd0077; }
.channelblock.vforum .titlebar { border-color: #3173a7; }
.channelblock.vforum .titlebar .logo { background: url("../img/element/sprite.png") 0 -190px no-repeat transparent; width: 132px; }
.channelblock.vforum.small .main .subkanal, .channelblock.vforum .sub .subkanal { color: #3173a7; }
.channelblock.vlog .titlebar { border-color: #8d2079; }
.channelblock.vlog .titlebar .logo { background: url("../img/element/sprite.png") 0 -240px no-repeat transparent; width: 93px; }
.channelblock.vlog.small .main .subkanal, .channelblock.vlog .sub .subkanal { color: #8d2079; }
.channelblock.full .main { width: 421px; float: left; }
.channelblock.full .main .desc { color: #fff; width: 60%; position: absolute; right: 0; bottom: 10px; }
.channelblock.full .main .desc .title { margin-bottom: 5px; font-size: 22px; line-height: 26px; text-shadow: 0 0 3px #593d67; font-weight: 600; }
.channelblock.full .main .desc .container { padding: 10px; background-color: rgba(0, 0, 0, 0.5); }
.channelblock .sub > li { height: 78px; border-bottom: 1px dotted #999; }
.channelblock .sub > li a { display: block; padding: 5px 0; }
.channelblock .sub > li .title { font-size: 15px; }
.channelblock .sub > li .thumbcontainer { width: 100px; float: left; margin-right: 5px; }
.channelblock.full .sub { float: right; width: 242px; }
.channelblock.full .sub li a { padding: 5px; }
.channelblock.small .main { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px dotted #999; }
.channelblock.small .main .thumbcontainer { margin-bottom: 5px; }
.channelblock.small .main .title { font-size: 18px; font-weight: 600; }
.channelblock.small .sub li { height: 68px; }
.channelblock.small .sub li .title { font-size: 14px; }

.page-footer .explore { background-color: #eaeaea; }
.page-footer .explore .titlebar { cursor: pointer; padding: 20px 40px; }
.page-footer .explore .titlebar .text { float: left; font-size: 24px; line-height: 40px; }
.page-footer .explore .titlebar .icon { background: url("../img/element/sprite.png") -140px 0 no-repeat transparent; float: left; height: 40px; width: 40px; margin-left: 20px; }
.page-footer .explore .titlebar .icon.open { background-position: -180px 0; }
.page-footer .explore .titlebar .logo { float: right; height: 40px; width: 140px; }
.page-footer .explore .titlebar .logo img { width: 100%; }
.page-footer .explore .channel-title { display: block; font-weight: bold; font-size: 20px; margin-bottom: 10px; font-weight: 600; }
.page-footer .explore .block-list { padding: 0 40px 20px; display: none; }
.page-footer .explore .block-list .block { float: left; width:12.5%; }
.page-footer .explore .block-list .block .links { font-size: 15px; line-height: 26px; }

.page-footer .bottomlinks { background-color: #bfbfbf; padding: 30px; }
.page-footer .bottomlinks .memberlogo { float: right; font-size: 11px; text-align: center; font-weight:bold;}
.page-footer .bottomlinks .links { width: 500px; float: left; font-size: 16px; line-height: 24px; }
.page-footer .bottomlinks .links li { width: 35%; float: left; }
.page-footer .copy { padding: 5px 0 20px; text-align: center; }

.titlebar.t1 { border-bottom: 1px solid #c00; height: 11px; position: relative; overflow: visible; z-index: 10; }
.titlebar.t1.mb { margin-bottom: 15px; }
.titlebar.t1 .text { color: #fff; width: 160px; padding: 0 10px; line-height: 22px; font-weight: bold; margin: 0 auto; background-color: #c00; text-align: center; }
.titlebar.brtop { border-top: 3px solid #ccc; }
.titlebar.t2 { font-size: 20px; }
.titlebar.t2.center { text-align: center; }
.titlebar.t2 span { color: #d42329; font-weight: bold; }
.titlebar.t3 { font-weight: 600; font-size: 16px; text-align: center; line-height: 30px; margin-bottom: 10px; color: #d42329; }
.titlebar.t4 { font-weight: 600; font-size: 20px; letter-spacing: 3px; line-height: 36px; }
.titlebar.t5 { font-weight:600; font-size: 24px; line-height: 26px; color:#666; color:#c00;}
.titlebar.skewed { height: 10px; position: relative; overflow: visible; margin-top: 15px; border-bottom: 3px solid #ccc; }
.titlebar.skewed .text { background-color: #c00; color: #fff; font-size: 20px; line-height: 30px; height: 30px; padding: 0 15px; position: absolute; z-index: 99; transform: skew(0, -8deg); left: 0; text-align: center; }
.titlebar.cvnews { color: #d42329; border-bottom-color: #d42329; }
.titlebar.cvbola { color: #339900; border-bottom-color: #339900; }
.titlebar.cvlife { color: #fd0077; border-bottom-color: #fd0077; }
.titlebar.cvlog { color: #8d2079; border-bottom-color: #8d2079; }
.titlebar.kanalpage { position: absolute; top: 20px; left: 0; background: rgba(255, 255, 255, 0.8); z-index: 9; font-weight: 600; font-size: 20px; padding: 0 20px; letter-spacing: 3px; color: #d42329; }
.titlebar.t9{border-bottom:1px solid #c00;}
	.titlebar.t9 .text{font:600 24px/30px titillium; border-bottom:2px solid #c00; float:left;}
.titlebar.kanalpage { position: absolute; top: 20px; left: 0; background: rgba(255, 255, 255, 0.8); z-index: 9; font-weight: bold; font-size: 24px; padding: 0 20px; letter-spacing: 3px; color: #d42329; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }



.momentum .topbanner img { width: 100%; }
.momentum .container { padding: 0 10px; background-color: #eee; }
.momentum .slide-container { position: relative; height: 167px; overflow: hidden; }
.momentum .momentumlist { position: absolute; top: 0; left: 0; }
.momentum .momentumlist li { border-bottom: 1px dotted #999; padding: 10px 0; line-height: 1.2; }
.momentum .momentumlist li > a { display: block; }
.momentum .momentumlist li .thumbcontainer { width: 40%; float: left; margin-right: 10px; }
.momentum .momentumlist li .upperdeck { font-size: 11px; font-weight: bold; color: #e60000; }

.tag-popular { background-color: #ccc; height: 30px; overflow: hidden; }
.tag-popular a { float: left; height: 30px; line-height: 30px; font-weight: 600; }
.tag-popular a.clef { font-weight: bold; color: #fff; background-color: #666; width: 28px; padding-left: 5px; font-size: 30px; font-style: italic; }
.tag-popular li { float: left; }
.tag-popular li a { padding: 0 10px; border-left: 1px solid #fff; }

.side-tag-populer .container { padding-top: 26px; font-style: italic; font-weight: 600; }
.side-tag-populer li { border-bottom: 2px dotted #999; font-size: 20px; }
.side-tag-populer li:nth-child(even) a { color: #888; }
.side-tag-populer li a { display: block; overflow: hidden; color: #444; }
.side-tag-populer li a:hover { color: #c00; }
.side-tag-populer li a { height: 53px; line-height: 53px; } 

.terpopuler.detail .newslist { padding-top: 25px; }
.terpopuler.detail .newslist li { margin-bottom:15px; }
.terpopuler.detail .newslist .title { font-size: 18px; font-weight:600; line-height:20px; font-family:titillium; }
.terpopuler.detail .newslist .title a { color:#c00;}
.terpopuler.detail .thumbcontainer { margin-bottom:5px; }

.indexlist { margin-bottom: 10px; }
.indexlist li { border-bottom: 1px solid #ccc; }
.indexlist li > a { display: block; padding: 15px 0; }
.indexlist li > a:hover { background-color: #f6f6f6; }
.indexlist li .thumbcontainer { float: left; width: 30%; }
.indexlist li .title { font-weight: 600; width: 68%; float: right; }
.indexlist li .upperdeck { color: #999; font-size: 12px; font-variant-caps: all-petite-caps; }
.indexlist li .upperdeck .channel { font-size: 14px; font-weight: 600; }
.indexlist li .upperdeck .channel.vnews { color: #d42329; }
.indexlist li .upperdeck .channel.vbola { color: #339900; }
.indexlist li .upperdeck .channel.vlife { color: #fd0077; }
.indexlist li .upperdeck .channel.vlog { color: #8d2079; }
.indexlist li .upperdeck .channel.vforum { color: #3173a7; }
.indexlist li .summary { color: #555; }
 .indexlist li .upperdeck { width: 68%; float: right; }
  .indexlist li .summary { width: 68%; float: right; }
  .indexlist li .title { margin-bottom: 5px; font-size: 18px; } 

.pagination { margin: 5px 0; }
.pagination .button, .pagination .pagelist { float: left; margin: 0 2px; }
.pagination .pagelist a { display: block; float: left; color: #555; padding: 0 10px; height: 22px; font: 600 14px/22px titillium; transition: background-color 0.2s; -moz-transition: background-color 0.2s; -webkit-transition: background-color 0.1s; -o-transition: background-color 0.2s; }
.pagination .pagelist a.active, .pagination .pagelist a.active:hover { background-color: #555; color: #fff; }
.pagination .pagelist a:hover { background-color: #c00; color: #fff; }
.pagination .pagelist a.separator:hover { background: none; color: #555; }

.article-detail { padding: 20px 0; }
.article-detail .upperdeck, .article-detail .title, .article-detail .summary { padding: 5px 0; }
.article-detail .upperdeck-kanal { color: #d42329; font-weight: 600; font-size: 22px; }
.article-detail .upperdeck { color: #000; font-weight: 300; font-size: 18px; }
.article-detail .title { font-size: 32px; font-weight: bold; line-height: 36px; width: 85%; }
.article-detail .summary { font-size: 18px; width: 85%; }
.article-detail .smalldesc { font-size: 12px; padding: 10px 0 10px; }
.article-detail .smalldesc .date { color: #777; }
.article-detail .content { font-size: 16px; line-height: 24px; }
.article-detail .photodesc { border-bottom: 1px dotted #aaa; color: #888; font-size: 12px; padding: 5px 0;  }
.article-detail .sideskycrapper{float:right; margin:0 0 1px 10px; width:120px; height:600px; overflow:hidden; background-color:#eee;}
.article-detail .content a:link{color:#0000ff; text-decoration:underline;}
.article-detail .content a:link:hover{color:#cc0033; }
.article-detail ul , .article-detail ol{margin-bottom:15px;}
.article-detail ul li, .article-detail ol li{margin-left:25px;}
.article-detail ul li{list-style:disc outside; }
.article-detail ol li{list-style:decimal outside; }

.article-detail .shareArea{position:relative; margin-bottom:5px; z-index:999;}
 .shareModule .printBtn{display:block; background: url('../img/element/sprite.png') -140px -150px; width:60px; height:30px;}
 .shareModule .emailBtn{display:block; background: url('../img/element/sprite.png') -140px -110px; width:60px; height:30px;}
 .article-detail .shareArea .shareModule{background-color:#fff; width:663px;height:62px; padding:10px 0 5px;}
      .shareModule .modList{float:left; margin-right:10px;}

.artikel-pagination{line-height:30px; overflow:hidden; font-family:titillium;}
	.artikel-pagination .label{width:90px; float:left; font-size:18px; font-weight:600;}
	.artikel-pagination .pagelist{float:left;}
		.artikel-pagination .pagelist a{display:block; float:left; padding:0 12px; margin-right:1px; text-align:center; background-color:#ccc;  color:#fff; transition:background-color .3s; }
		.artikel-pagination .pagelist a.page{font-weight:bold; font-size:18px;}
		.artikel-pagination .pagelist a.nav{font-weight:600; font-size:14px; background-color:#888;}  .artikel-pagination .pagelist a.nav:hover{background-color:#c00;}
		.artikel-pagination .pagelist a:hover{background-color:#888;}
		.artikel-pagination .pagelist a.active{background-color:#c00;}

  .article-detail .author { width: 65%; float: left; }
  .article-detail .date { width: 34%; float: right; text-align: right; } 
/*
  .article-detail .content { width:590px; float:left; }
  .article-detail .shareArea{float:right; width:70px; }
  .article-detail .shareArea .shareModule{border-left: 1px solid #666; z-index: 1; position: relative; top: 0px; padding-left:10px;}
	 .article-detail .shareArea .shareModule .modList{padding:10px 0;}
*/

.artikel-terkait { padding: 20px 0 10px; border-bottom: 3px solid #ddd; }

.fokus { border-bottom: 5px solid #ccc; padding-bottom: 5px; }
.fokus li { font-weight: 600; }
.fokus .morelink { color: #c00; font-weight: bold; display: block; line-height: 24px; text-align: center; }
.fokus .main { margin-bottom: 16px; }
.fokus .main .desc { position: absolute; bottom: 0; left: 0; width: 100%; color: #fff; }
.fokus .main .desc .container { padding: 5px 10px; background-color: rgba(0, 0, 0, 0.5); }
.fokus .main .title { display: none; }
.fokus .sub { padding: 9px 0; }
.fokus .sub .thumbcontainer { float: left; margin-right: 10px; width: 50%; }

.sorot { border-bottom: 5px solid #ddd; }
.sorot .main { display: block; padding: 5px; background-color: #eee; }
.sorot .edition { position: absolute; font-weight: bold; color: #fff; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); font-style: italic; line-height: 24px; padding: 0 10px; }
.sorot .title { font-size: 18px; }
.sorot .inflink { display: block; line-height: 24px; font-size: 16px; text-align: center; padding: 10px 0; }
.sorot .title, .sorot .inflink { color: #c00; font-weight: bold; }
.sorot .thumbcontainer { float: left; margin-right: 10px; width: 45%; }
.sorot .summary { padding: 5px 0; }

.boxstack .colstack { position: relative; }
.boxstack a.overlay { display: block; position: absolute; height: 100%; width: 100%; z-index: 10; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; -ms-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s; }
.boxstack a.overlay .caption { position: absolute; padding: 10px; bottom: 0px; }
.boxstack a.overlay .caption .title { font-weight: 600; }
.boxstack .quickread.trigger { position: absolute; z-index: 99; top: 10px; right: 10px; display: block; line-height: 30px; height: 30px; padding: 0 10px; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-weight: 600; display: none; }
.boxstack .quickread.trigger:hover { background-color: #000; }
.boxstack .colstack:hover .quickread.trigger{display:block;}
.boxstack a.overlay.white { background-color: rgba(255, 255, 255, 0.6); color: #000; }
.boxstack a.overlay.white:hover { background-color: rgba(255, 255, 255, 0.8); }
.boxstack a.overlay.white .caption .title { color: #c00; }
.boxstack a.overlay.red { background-color: rgba(255, 0, 0, 0.4); }
.boxstack a.overlay.red:hover { background-color: rgba(255, 0, 0, 0.6); }
.boxstack a.overlay.red .caption { color: #fff; }
.boxstack a.overlay.black { background-color: rgba(0, 0, 0, 0.4); }
.boxstack a.overlay.black:hover { background-color: rgba(0, 0, 0, 0.6); }
.boxstack a.overlay.black .caption { color: #fff; }
.boxstack .pic { overflow: hidden; position: relative; }
.boxstack .pic, .boxstack .pic img { height: 100%; }
.boxstack .pic img { position: absolute; }
.boxstack .pic.orient-left img { left: 0; }
.boxstack .pic.orient-center img { left: -9999px; right: -9999px; margin: auto; }
.boxstack .pic.orient-right img { right: 0; }
.boxstack .col { float: left; }
.boxstack .col { width: 325px; } 

.boxstack .col.mainheadline { width: 650px; }
.boxstack .col .colstack.h200 { height: 200px; }
.boxstack .col .colstack.h200 .caption .title { font-size: 22px; line-height: 24px; }
.boxstack .col .colstack.h200 .caption .sum { font-size: 12px; }
.boxstack .col .colstack.h300 { height: 300px; }
.boxstack .col .colstack.h300 .caption .title { font-size: 26px; line-height: 28px; }
.boxstack .col .colstack.h400 { height: 400px; }
.boxstack .col .colstack.h400 .caption .title { font-size: 30px; line-height: 32px; }
.boxstack .col .colstack.h400 .caption .sum { font-size: 16px; }
.boxstack.twothird .col { width: 331px; }

.boxstack .col .colstack .caption .waktu { font-size: 10px; margin:10px 0; }

.boxlist .col.w400 { width: 400px; }
.boxlist .col.w325 { width: 325px; }
.boxlist .col.w250 { width: 250px; }
.boxlist .col .colstack { overflow: hidden; position: relative; margin-bottom: 13px; }
.boxlist .col .colstack.h200 { height: 200px; }
.boxlist .col .colstack.h225 { height: 225px; }
.boxlist .col .colstack.h280 { height: 280px; }
.boxlist .col a.overlay { display: block; position: absolute; height: 100%; width: 100%; z-index: 10; }
.boxlist .col a.overlay .caption { position: absolute; padding: 10px; bottom: 0; left: 10px; width: 60%; color: #fff; background: rgba(0, 0, 0, 0.6); }
.boxlist .col a.overlay .caption .title { font-weight: 600; font-size: 20px; }
.boxlist .col a.overlay .subkanal { position: absolute; background: rgba(200, 0, 0, 0.7); top: 0; left: 0; padding: 0 10px; font-weight: bold; color: #fff; font-size: 16px; }
.boxlist .col .quickread { position: absolute; z-index: 99; top: 10px; right: 10px; display: block; line-height: 30px; height: 30px; padding: 0 10px; background-color: rgba(0, 0, 0, 0.7); color: #fff; font-weight: 600; display: none; }
.boxlist .col .quickread:hover { background-color: black; }
.boxlist .col .colstack:hover .quickread { display: block; }
.boxlist .col .pic { overflow: hidden; position: relative; }
.boxlist .col .pic, .boxlist .col .pic img { height: 100%; }
.boxlist .col .pic img { position: absolute; }
.boxlist .col .pic.orient-left img { left: 0; }
.boxlist .col .pic.orient-center img { left: -9999px; right: -9999px; margin: auto; }
.boxlist .col .pic.orient-right img { right: 0; }
.boxlist .row:last-child .col .colstack { margin: 0; }

 .list-berita-kanal1 .newslist.nl4 > li.main > a { width: 70%; } 


 .jangan-lewatkan { width: 90%; } 


.boxheadline .col { float: left; }
.boxheadline .col { width: 200px; }
  .boxheadline .col.main { width: 575px; } 

.boxheadline .col .colstack { position: relative; }
.boxheadline .col .colstack.h140 { height: 140px; }
.boxheadline .col .colstack.h280 { height: 280px; }
.boxheadline .col .colstack.h420 { height: 420px; }
.boxheadline .col .waktu { font-size: 10px; margin: 10px 0; }
.boxheadline .pic { overflow: hidden; position: relative; }
.boxheadline .pic, .boxheadline .pic img { height: 100%; }
.boxheadline .pic img { position: absolute; }
.boxheadline .pic.orient-left img { left: 0; }
.boxheadline .pic.orient-center img { left: -9999px; right: -9999px; margin: auto; }
.boxheadline .pic.orient-right img { right: 0; }
.boxheadline a.overlay { display: block; position: absolute; height: 100%; width: 100%; z-index: 10; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; -ms-transition: background-color 0.2s; -o-transition: background-color 0.2s; transition: background-color 0.2s; }
.boxheadline a.overlay .caption { position: absolute; padding: 10px; bottom: 0px; }
.boxheadline a.overlay .caption .title { font-weight: 600; }
.boxheadline a.overlay .quickread { position: absolute; z-index: 99; top: 10px; right: 10px; display: block; line-height: 30px; height: 30px; padding: 0 10px; background-color: rgba(0, 0, 0, 0.7); color: #fff; font-weight: 600; display: none; }
.boxheadline a.overlay .quickread:hover { background-color: black; }
.boxheadline a.overlay:hover .quickread { display: block; }
.boxheadline a.overlay.white { background-color: rgba(255, 255, 255, 0.6); color: #000; }
.boxheadline a.overlay.white:hover { background-color: rgba(255, 255, 255, 0.8); }
.boxheadline a.overlay.white .caption .title { color: #c00; }
.boxheadline a.overlay.red { background-color: rgba(255, 0, 0, 0.4); }
.boxheadline a.overlay.red:hover { background-color: rgba(255, 0, 0, 0.6); }
.boxheadline a.overlay.red .caption { color: #fff; }
.boxheadline a.overlay.black { background-color: rgba(0, 0, 0, 0.4); }
.boxheadline a.overlay.black:hover { background-color: rgba(0, 0, 0, 0.6); }
.boxheadline a.overlay.black .caption { color: #fff; }
.boxheadline .col.main a.overlay .caption { background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 24px; width: 50%; bottom: 50px; }

.gheadline { padding: 15px 15px 0; background-color: #f3f3f3; border-bottom: 3px solid #ccc; position: relative; }
.gheadline > a { display: block; }
.gheadline .desc { float: left; }
.gheadline .desc .topic, .gheadline .desc .title { font-weight: 600; }
.gheadline .desc .topic, .gheadline .desc .summary { color: #333; }
.gheadline .desc .title { font-size: 28px; padding: 5px 0; line-height: 26px; }
.gheadline .pic { float: right; overflow: hidden; position: relative; }
.gheadline .pic img { height: 100%; position: absolute; left: -9999px; right: -9999px; margin: auto; }
.gheadline .desc { width: 410px; padding-top: 20px; }
  .gheadline .pic { width: 200px; height: 200px; } 

.greyboxlist li { float: left; width: 205px; margin: 0 15px 15px 0; }
.greyboxlist li > a { display: block; overflow: hidden; background-color: #eee; }
.greyboxlist li > a:hover { background-color: #e0e0e0; }
.greyboxlist li .desc { padding: 15px 10px 0; }
.greyboxlist li .desc .topic { font-size: 12px; font-weight: bold; color: #777; line-height: 14px; overflow: hidden; font-variant-caps: all-petite-caps; }
.greyboxlist li .desc .time { font-size: 12px; color: #666; line-height: 16px; height: 16px; overflow: hidden; }
.greyboxlist li .desc .title { font-size: 18px; font-weight: 600; padding: 5px 0; height: 72px; line-height: 21px; overflow: hidden; }

.gheadline2 { padding: 15px; background-color: #f3f3f3; border-bottom: 3px solid #ccc; position: relative; }
.gheadline2 .kanaltitle { font-weight: 600; font-size: 20px; padding: 10px 0; letter-spacing: 5px; color: #d42329; }
.gheadline2 .main { display: block; }
.gheadline2 .main .thumbcontainer { margin-bottom: 10px; }
.gheadline2 .main .upperdeck { color: #666; font-size: 13px; font-weight: bold; }
.gheadline2 .main .summary { color: #333; }
.gheadline2 .main .title { font-weight: 600; font-size: 24px; padding: 5px 0; }

.indeks-selector .label { font-weight: bold; float: left; line-height: 30px; margin: 0 20px; }
.indeks-selector .selector-container { padding: 2px 2px 2px 5px; border: 1px solid #666; float: left; margin-right: 10px; }
.indeks-selector .selector-container select { font-weight: bold; color: #666; }
.indeks-selector .selector-container select:focus { outline: none; }

.indeks-selector, .search-desc { padding: 20px 0 10px; border-bottom: 3px solid #999; }

.search-desc .keyword { font-size: 18px; font-weight: 600; color: #c00; }


.fokus_indeks .indeks-selector { padding: 10px; background-color: #f3f3f3; margin-bottom: 2px; }
.fokus_indeks .indeks-selector .label { float: left; line-height: 30px; font-weight: 600; font-size: 16px; padding-right: 15px; }
.fokus_indeks .listindeks { background-color: #f3f3f3; padding: 10px 5px; }
.fokus_indeks .listindeks ul > li { margin: 0 5px; overflow: hidden; }
.fokus_indeks .listindeks ul > li .upperdeck { font-weight: bold; font-size: 10px; color: #d42329; }
.fokus_indeks .listindeks ul > li .title { font-weight: 600; }
.fokus_indeks .listindeks ul > li { width: 207px; float: left; height: 200px; }
  .fokus_indeks .listindeks ul > li .thumbcontainer { margin-bottom: 5px; } 


.sorothead .desc { height: 101px; overflow: hidden; }
.sorothead .desc .container { padding: 10px; }
.sorothead .main { float: left; height: 270px; overflow: hidden; position: relative; }
.sorothead .main .edition { position: absolute; top: 140px; left: 0; height: 30px; line-height: 30px; background-color: #000; color: #fff; font-size: 18px; padding: 0 10px; }
.sorothead .main .desc { position: absolute; top: 170px; width: 100%; background-color: rgba(0, 0, 0, 0.5); }
.sorothead .main .desc .title { font-size: 24px; }
.sorothead .carousel { width: 600px; position: relative; float: right; overflow: hidden; height: 270px; }
.sorothead .carousel .slider { position: absolute; top: 0; left: 0; }
.sorothead .carousel .slider > li { width: 300px; float: left; height: 270px; }
.sorothead .carousel .slider > li a { display: block; background-color: #000; }
.sorothead .carousel .slider > li:nth-child(even) a { background-color: #333; }
.sorothead .carousel .navBtn { background: url("../img/element/sprite.png") -140px -40px no-repeat transparent; width: 35px; height: 70px; opacity: 0.75; -moz-opacity: 0.75; -webkit-opacity: 0.75; -o-opacity: 0.75; filter: alpha(opacity=75); position: absolute; z-index: 10; top: 99px; }
.sorothead .carousel .navBtn:hover { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; -o-opacity: 1; filter: alpha(opacity=100); }
.sorothead .carousel .navBtn.prev { left: 0; }
.sorothead .carousel .navBtn.next { background-position: -175px -40px; right: 0; }
.sorothead .title { color: #fff; font-size: 18px; font-weight: 600; padding: 5px 0; }
.sorothead .upperdeck { color: #aaa; font-weight: 600; }
.sorothead .summary { color: #fff; }
.sorothead .main { width: 375px; }
  .sorothead .carousel { width: 600px; } 


.sorot_indeks .indeks-selector { padding: 10px; background-color: #f3f3f3; margin-bottom: 2px; }
.sorot_indeks .indeks-selector .label { float: left; line-height: 30px; font-weight: 600; font-size: 16px; padding-right: 15px; }
.sorot_indeks .listindeks { background-color: #f3f3f3; padding: 10px 5px; }
.sorot_indeks .listindeks ul > li { margin: 0 5px; overflow: hidden; }
.sorot_indeks .listindeks ul > li .edition { position: absolute; bottom: 0; left: 0; height: 24px; line-height: 24px; background-color: #000; color: #fff; padding: 0 5px; }
.sorot_indeks .listindeks ul > li .title { font-weight: 600; }
 .sorot_indeks .listindeks ul > li { width: 153px; float: left; height: 160px; }

.sorot_terpopuler ul > li { overflow: hidden; }
.sorot_terpopuler ul > li .title { font-weight: 600; }
.sorot_terpopuler ul > li .edition { position: absolute; bottom: 0; left: 0; height: 30px; line-height: 30px; background-color: #000; color: #fff; font-size: 16px; padding: 0 7px; }
.sorot_terpopuler ul > li { width: 325px; float: left; height: 310px; }
  .sorot_terpopuler ul > li:nth-child(even) { float: right; }
  .sorot_terpopuler ul > li .title { font-size: 18px; } 

/*
.hot-topic .newslist li:nth-child(even) .thumbcontainer { float: right; margin-right: 0; margin-left: 10px; }
*/
.about-table tr td { border-bottom: 1px solid #aaa; padding: 10px 0; }
.about-table tr td br { display: block; margin-top: 5px; line-height: 10px; }
.about-table tr td:first-child { font-weight: bold; }


.popStack td{padding:5px;}
.popStack td img{ width:100%;}
.popStack .container{ display:block; position:relative;  }

.popStack{border:1px solid #999; border-top:0; padding:5px;}
.popStack .caption{position:absolute; width:100%; bottom:0; background-color:rgba(0,0,0,.5); font-family:titillium; color:#ddd; text-align:center; padding:10px 0; opacity:0; transition:opacity .2s;}
.popStack .caption .title{font-size:16px; font-weight:600;color:#fff;} 
.popStack .container:hover .caption{opacity:1;}

.tokohIndeks-selector .searchbar{width:250px; margin-left:auto; margin-right:auto;}
.tokohIndeks-selector .alph { width:482px; margin:0 auto;}
.tokohIndeks-selector .alph li {float:left; margin:10px 5px 0;}
.tokohIndeks-selector .alph li a{display:block; font:bold 16px/25px titillium; border:1px solid #999; width:25px; text-align:center; color:#c00;}
	.tokohIndeks-selector .alph li a:hover{background-color:#c00; color:#fff; border-color:#c00;}

.tokohList.tl1 .list{padding:10px 0; border-bottom:2px dotted #999;}
.tokohList.tl1 .thumbcontainer{width:20%; float:left;}
	.tokohList.tl1 .desc{width:78%; float:right;}
	
.tokohList.tl2 .list{padding:10px 0; border-bottom:1px dotted #999; }
.tokohList.tl2 .thumbcontainer{width:25%; float:left;}
	.tokohList.tl2 .desc{width:73%; float:right; height:90px; overflow:hidden;}
	.tokohList.tl2 .nama-tokoh .text{font-size:18px; line-height:24px; }
	
.tokohList.tl1 .list .nama-tokoh , .tokohList.tl1 .list .desc-tokoh{margin-bottom:10px;}

.tokohList.tl2 .list .nama-tokoh{margin-bottom:5px;}

.tokoh-profile-detail { }
.tokoh-profile-detail .thumbcontainer{ width:250px; float:left;}
.tokoh-profile-detail .desc{width:400px; float:right; font-size:16px;}
.tokoh-profile-detail .desc .smicons .icon.twt ,  .tokoh-profile-detail .desc .smicons .icon.fb , .tokoh-profile-detail .desc .smicons .icon.ig {margin-right: 10px;}

.twitter.container, .facebook.container {background-color: #e5e5e5; height: 300px;}

.otp{position:fixed; top:250px; z-index:9999999; width:100%;}
.otp .container{margin-right:auto; margin-left:auto; position:relative;}
	.otp.w600x300 .container{width:600px; height:300px;}

.ceritaanda-widget , .register{ background-color: #eaeaea; font-size:12px;}
	.ceritaanda-widget.brtop{border-top: 4px solid #c00;}
	.ceritaanda-widget ol li{list-style:outside decimal; margin:0 0 10px 10px;}

.form-kirimceritaanda .titlebar{margin-bottom:15px;}
.form-kirimceritaanda .input-text{width:463px;}
.form-kirimceritaanda .input-textarea{width:463px; resize:none;}
.form-kirimceritaanda label{font-weight:bold; font-size:16px; color:#666; margin-right:10px;}
.form-kirimceritaanda .sub{font-size:11px; color:#999;}

.form-kirimceritaanda .formrow{margin-bottom:20px;}


.form-login .input-text , .form-login .input-password{width:335px; float:left; background-color:#fff;}
.form-login label{ font-size:16px; color:#666; margin-right:10px; line-height:20px;  font-family:titillium;}

.form-login .formrow{margin-bottom:20px; width:350px;}
.form-login .fpass{display:block; float:right; font-weight:bold; font-size:12px; color:#c00;  font-family:titillium;} .form-login .fpass:hover{text-decoration:underline;}
.form-login .checklabel{font-size:14px;} .form-login .checklabel a{color:#c00;}

.form-login .connect{text-align:center; background-color:#eaeaea; padding:30px 0;}

.register .form-login .formrow{margin-right:auto; margin-left:auto;}

.login_title{border-bottom: solid 5px #eee; padding:10px 0;}
	.login_title .desc{font: normal 20px/24px titillium; color:#aaa; padding-left:20px; margin-left:20px; border-left:1px solid #aaa;}

@-ms-viewport { width: device-width; }


.preloader-bar{text-align:center; padding:10px 0;}

.otp{position:fixed; top:250px; z-index:9999999; width:100%;}
.otp .container{margin-right:auto; margin-left:auto; position:relative;}
	.otp.w600x300 .container{width:600px; height:300px;}
.otp .close_btn{display:block; height:25px; padding:0 25px 0 15px; font:bold 16px/25px titillium; color:#fff; position:absolute; top:-25px; right:0; background:url('../img/element/close_btn.png') right center no-repeat #000; z-index:999999;}
	.otp .close_btn:hover{background-color:#f00;}		
	.titlebars .text {border-bottom: 1px solid #C00; color: #FFF; width: 160px; padding: 0px 10px; line-height: 22px; font-weight: bold; margin: 0px auto; background-color: #C00; text-align: center;}

.titlebars {border-bottom: 1px solid #C00; height: 11px; position: relative; overflow: visible; z-index: 10;}
.gap { height: 10px;}
.gapspace { height: 36px;}

/* Surat */

.surat-judul {color:#C70607; border-bottom: 1px solid red; letter-spacing: 4px; padding-bottom: 5px; margin: 10px 0; font-family: titillium; font-weight: bold; }
.surat-btn {float: right;}
.button-red {
	font-size: 11px;
	font-weight: bold;
	font-family: titillium;
	background-color: red;
	color: white;
	border:1px solid #870007;
	cursor: pointer;
}

.button-grey {
	font-size: 11px;
    font-weight: bold;
    font-family: titillium;
    color: #606060;
    border: 1px solid #C3C3C3;
    cursor: pointer;
    margin: 1px 72px;
    top: -21px;
    position: relative;
}

.video-nav{ height:30px; position:relative; top:20px; left: 230px; margin-right:auto; margin-left:auto; float:left; text-align:center; }/* chage */
		.video-nav a{ display:block; line-height:10px; font:bold 15px/18px titillium; color:#333; margin:5px 17px 0; float:left; padding:0 0px;  width:50px;}
		.video-nav a:hover{color:#999;}
		.video-nav img{ width:80%; top:-15px;  margin-bottom:-25px;}
		.video-nav a.active{ color:#c00;  }/* change border-bottom:solid 3px #c00; */
		.video-nav a.active img{ width:70%; top:-15px; margin-bottom:-25px; }

.billboard .container{position:relative;}
.billboard .container.minimized{display:none;}

.billboard .trigger_btn{display:block; height:25px; padding:0 30px 0 15px; font:bold 16px/25px titillium; color:#fff; position:absolute; top:0; left:0;  z-index:9992;}

.billboard .trigger_btn.minimize{	background:url('../img/element/min_btn.png') right center no-repeat rgba(0,0,0,.6);}
	.billboard .trigger_btn.close{	background:url('../img/element/close_btn.png') right center no-repeat rgba(0,0,0,.6);}
	
	.billboard .trigger_btn:hover{background-color:rgba(255,0,0,.6) !important;}

.otp{position:fixed; top:250px; z-index:9999999; width:100%;}
.otp .container{margin-right:auto; margin-left:auto; position:relative;}
	.otp.w600x300 .container{width:600px; height:300px;}
.otp .close_btn{display:block; height:25px; padding:0 25px 0 15px; font:bold 16px/25px titillium; color:#fff; position:absolute; top:-25px; right:0; background:url('../img/element/close_btn.png') right center no-repeat #000; z-index:999999;}
	.otp .close_btn:hover{background-color:#f00;}