@charset"utf-8";

/* CSS Document */

/* ========================================================================================================== 
	Desktop Layout: 1024px to a max of 1280px.  Inherits styles from: Mobile Layout and Tablet Layout. [1280]
   ==========================================================================================================	
*/
 @media only screen and (min-width: 1100px) {
    /* S : RADIO AUSTRALIA */
    .radioAustralia {
        width:298px;
        height:266px;
        border:solid 1px #969696;
        margin-top:20px;
        background:url(http://assets.kompas.com/data/2013/kompascom/images/bg_australia.jpg) no-repeat;
    }
    a.headRadioAustralia {
        display:block;
        width:290px;
        height:37px;
        text-align:right;
        font: normal 14px/18px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #f87e36;
        text-decoration:none;
        padding-right:10px;
        padding-top:13px;
        display:block;
    }
    a.headRadioAustralia:hover {
        text-decoration:underline;
    }
    .listRadioAustralia {
        width:240px;
        height:70px;
        padding:0 0 0 35px;
    }
    .listRadioAustralia a {
        font: normal 14px/18px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #51789e;
        text-decoration:none;
        height:38px;
        overflow:hidden;
        display:table-cell;
        vertical-align:middle;
    }
    .listRadioAustralia a:hover {
        text-decoration:underline;
    }
    .listRadioAustralia h6 {
        font: normal 12px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #f87e36;
        margin:0;
        padding:10px 0 0 0;
    }
    /* E : RADIO AUSTRALIA */
    /* S : TABLE EKONOMI =========== */
    table.tableEkonomi {
        width: 410px;
        border:solid 1px #ccc;
        padding: 5px 0px 10px 22px;
        display:table-cell;
    }
    td.titleSahamFalas {
        font: normal 17px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #626262;
    }
    td.updateData {
        font: normal 10px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #626262;
        vertical-align:bottom;
        text-align:right
    }
    tr.headSahamFalas {
        border-bottom:solid 1px #ccc;
    }
    td.listDataIn1 {
        font: normal 13px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #e74f1d;
        width:30px;
        display:table-row;
    }
    td.listDataIn2 {
        font: normal 11px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #e74f1d;
        width:113px;
    }
    td.listDataIn {
        font: normal 13px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #626262;
        display:table-cell;
        text-align:right;
    }
    td.brCol {
        font-size:10px;
        height:3px;
        display:table-row;
    }
    /* E : TABLE EKONOMI =========== */
    /* S : SURAT PEMBACA =========== */
    a.LoginKompasId {
        background:url(http://assets.kompas.com/data/2013/kompascom/images/bgloginkompasid.jpg) no-repeat left #33a7e0;
        font: normal 15px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        padding:8px 20px 8px 30px;
        margin-top:10px;
        display:inline-block;
        text-shadow: 0px 0px 5px #000000;
        filter: dropshadow(color=#000000, offx=0, offy=0);
    }
    a.RegistrasiKompasId {
        background:#b6cd04;
        font: normal 15px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        padding:8px 20px;
        margin-left:10px;
        margin-top:10px;
        display:inline-block;
        text-shadow: 0px 0px 5px #000000;
        filter: dropshadow(color=#000000, offx=0, offy=0);
    }
    .kirimSuratLeft {
        float:left;
        width:400px;
    }
    .kirimSuratLeft h1 {
        margin:0;
        padding:0;
        font: normal 16px/16px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
    }
    .kirimSuratLeft p {
        font: normal 13px/16px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
    }
    .kirimSuratRight {
        float:left;
        padding:20px 0 0 20px;
    }
    .kirimSuratRight a {
        text-decoration:none;
    }
    .kirimSuratAnda {
        width:94%;
        height:70px;
        padding:20px;
        background:#f5f5f5;
        border:solid 1px #ededed;
    }
    .showSyaratSurat ul {
        margin:0;
        padding:0 0 0 20px;
    }
    .showSyaratSurat ul li {
        font: normal 14px/18px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #000;
        list-style-type:square;
        padding:5px 0;
    }
    .showSyaratSurat p {
        font: normal 14px/18px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #000;
        list-style-type:square;
    }
    .showSyaratSurat h1, h2 {
        font: normal 18px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
    }
    span.arrowSuratPembaca {
        position:absolute;
        top:44px;
        margin-left:30%;
        /*        display:none;*/
    }
    .topTabSuratPembaca {
        border-bottom:solid 1px #ccc;
        padding-bottom:10px;
        position:relative;
    }
    ul.tabSuratPembaca {
        margin:0;
        padding:0;
        float:left;
    }
    ul.tabSuratPembaca li {
        list-style-type:none;
        display:inline;
        padding-right:20px;
    }
    ul.tabSuratPembaca li a {
        text-decoration:none;
        font: normal 14px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #b9b9b9;
        display:inline-block;
        padding:10px 0 0 0;
        position:relative;
    }
    ul.tabSuratPembaca li a:hover {
        text-decoration:none;
        font: normal 14px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #e74f1d;
    }
    ul.tabSuratPembaca li a.active {
        color: #e74f1d;
    }
    ul.tabSuratPembaca li a.current > .arrowSuratPembaca {
        display:block;
        position:absolute;
        top:44px;
        margin-left:35%;
    }
    .listSuratPembacaLain {
        padding:10px 0;
        border-bottom:solid 1px #d9d9d9;
    }
    .listSuratPembacaLain:last-child {
        padding:10px 0;
        border-bottom:none;
    }
    .listSuratPembacaLain h6 {
        font: normal 11px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #626262;
        margin:0;
        padding:0;
    }
    .listSuratPembacaLain a {
        font: normal 14px/20px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        margin:0;
        padding:0;
        text-decoration:none;
        display:block;
        overflow:hidden;
		height:auto;
    }
    .listSuratPembacaLain a:hover {
        text-decoration:underline;
    }
    .suratPembacaLain {
        width:300px;
        padding-top:10px;
    }
    .suratPembacaLain h1 {
        font: normal 18px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        border-bottom:solid 3px #e64e17;
        padding:5px 0;
        margin:0;
    }
    a.fileType {
        color:#fe3c00;
        display:inline-block;
        padding:7px 0 0 10px;
    }
    label.smallInput {
        background:#dddddd;
        width:250px;
    }
    .boxSurat h1 {
        font: normal 18px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        margin:0;
        padding:0;
    }
    .boxSurat p {
        font: normal 14px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
    }
    .boxSurat a {
        text-decoration:none;
    }
    .inputSurat1 {
        font: normal 14px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        padding:5px 0 10px 0;
    }
    .inputSurat1 input {
        border:solid 1px #e3e2e2;
        width:80%;
        padding:8px 10px;
        margin-top:10px 0 15px 0;
        outline:none;
    }
    .inputSurat1 input[type="file"] {
        border:solid 1px #e3e2e2;
        width:10%;
        padding:8px 10px;
        margin-top:10px 0 15px 0;
        outline:none;
    }
    .inputSurat1 textarea {
        border:solid 1px #e3e2e2;
        width:80%;
        padding:8px 10px;
        margin-top:10px 0 15px 0;
        outline:none;
        min-height:100px;
    }
    .boxSurat {
        background:#f6f6f6;
        padding:30px;
        border:solid 1px #ececec;
        width:80%;
    }
    .boxPembaca {
        width:300px;
    }
    .boxPembaca h1 {
        font: normal 15px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #000;
    }
    .boxPembaca h2 {
        font: normal 13px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
    }
    .boxPembaca a {
        font: normal 13px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fe5400;
        text-decoration:none;
    }
    .rightListRubrik4 {
        width: 770px;
        float: left;
    }
    .rightListRubrik4 h6 {
        margin: 0;
        padding: 0;
        font: normal 12px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #f09105;
    }
    .rightListRubrik4 h5 {
        margin: 0;
        padding: 5px 0 0 0;
        font: normal 10px/14px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #ccc;
    }
    .rightListRubrik4 a {
        margin: 0;
        padding: 5px 0;
        font: normal 18px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        display: block;
        height: 20px;
        overflow: hidden;
    }
    .rightListRubrik4 a:hover {
        text-decoration:underline;
    }
    .rightListRubrik4 p {
        font: normal 16px/30px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
    }
    .rightListRubrik3 {
        width: 770px;
        float: left;
    }
    .rightListRubrik3 h6 {
        margin: 0;
        padding: 0;
        font: normal 12px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #f09105;
    }
    .rightListRubrik3 h5 {
        margin: 0;
        padding: 5px 0 0 0;
        font: normal 10px/14px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #ccc;
    }
    .rightListRubrik3 a {
        margin: 0;
        padding: 5px 0;
        font: normal 18px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        display: block;
        height: 20px;
        overflow: hidden;
    }
    .rightListRubrik3 a:hover {
        text-decoration:underline;
    }
    .rightListRubrik3 p {
        margin: 0;
        padding: 5px 0 0 0;
        font: normal 14px/20px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        overflow: hidden;
    }
    ul.tabSuratPembaca li a.titleSuratPembaca {
        display:inline-block;
        float:left;
        margin:0;
        padding:0;
        width:300px;
        font: normal 30px "OpenSansSemiold", Arial, Helvetica, sans-serif;
        color:#000;
    }
    a.indexSuratPembaca {
        text-align:right;
        display:inline-block;
        padding:0px 5px;
        text-decoration:none;
        font: normal 12px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #ccc;
        float:right;
        border:solid 1px #ccc;
        margin-top:10px;
    }
    a.indexSuratPembaca:hover {
        text-decoration:underline;
        background:#000;
        color:#fff;
        text-decoration:none;
    }
    /* E : SURAT PEMBACA =========== */
    /* S : BBC INDONESIA =========== */
    .topIndexBBC {
        width:100%;
        margin:20px 0;
        background:#990000;
    }
    .bbcIndonesia {
        width:298px;
        height:248px;
        margin-top:20px;
        border:solid 1px #ccc;
        overflow:hidden;
    }
    .bbcList {
        padding:5px 10px;
    }
    .bbcList img {
        float:left;
        width:100px;
        height:60px;
        border:solid 1px #ccc;
    }
    .bbcListRight {
        float:left;
        width:160px;
        padding-left:10px;
    }
    .bbcListRight h6 {
        font:normal 10px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color:#000;
        margin:0;
        padding:0 0 5px 0;
    }
    .bbcListRight a {
        text-decoration:none;
        font:bold 14px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color:#000;
        display:block;
        height:38px;
        overflow:hidden;
    }
    .bbcListRight a:hover {
        text-decoration:underline;
    }
    a.bbcIndex {
        text-align:right;
        display:block;
        font:normal 14px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color:#f00;
        text-decoration:none;
        padding:6px 10px 10px 0;
    }
    a.bbcIndex:hover {
        text-decoration:underline;
    }
    a.bbcHead {
        padding-bottom:10px;
        display:block;
    }
    /* E : BBC INDONESIA =========== */
    /* S : INDEX MH ===== */
    .indexMH a {
        font: normal 9px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #999;
        margin: 0;
        display: inline-block;
        text-align: right;
        float: right;
        border-radius: 3px;
        cursor: pointer;
        padding: 1px 7px 0px 7px;
        margin-top:5px;
        background: #fff;
        position: relative;
        z-index: 9;
        text-transform: uppercase;
        text-decoration:none;
    }
    .indexMH a:hover {
        color: #000;
    }
    .indexMH {
        padding: 5px 30px 0 0px;
        float: right;
    }
    /* S : TAB RUBRIK HL ======= */
    .imgTrendingB {
        display: none;
    }
    .TrendingRubrikB {
        width: 300px;
        height: 250px;
        float: left;
        overflow: hidden;
        margin-top: -5px;
    }
    .TrendingRubrikB h1 {
        margin: 0;
        padding: 0;
        font: normal 16px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
    }
    .TrendingRubrikB ul {
        margin: 0;
        padding: 0;
    }
    .TrendingRubrikB ul li {
        list-style-type: none;
        padding: 6px 0;
        position: relative;
        height: 47px;
    }
    .TrendingRubrikB ul li span.noTrendingRubrik {
        font: normal 30px "OpenSansExtraboldItalic", Arial, Helvetica, sans-serif;
        color: #fec287;
        display: inline-block;
        width: 30px;
        float: left;
    }
    .TrendingRubrikB ul li span.anchorTrendingB a {
        text-decoration: none;
        font: normal 14px/20px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        display: table-cell;
        width: 300px;
        overflow: hidden;
        height: 48px;
        vertical-align: middle;
        padding: 6px 10px 6px 15px;
        border-bottom: dotted 1px #e5e5e5;
    }
    .TrendingRubrikB ul li span.anchorTrendingB a:hover {
        text-decoration: none;
        background: #f0f0f0;
        cursor: pointer;
    }
    .TrendingRubrikB ul li span.anchorTrendingB a:active {
        text-decoration: none;
        background: #f0f0f0;
    }
    .TrendingRubrikB ul li span.anchorTrendingB a.selected {
        text-decoration: none;
        background: #e6e6e6;
    }
    .TrendingRubrik ul li.tabRubrikHL {
        padding: 8px 0 8px 10px;
        border: none;
    }
    .TrendingRubrik ul li.tabRubrikHL span.anchorTrending a {
        padding: 10px 10px;
        border-bottom: solid 1px #f0f0f0;
        color: #666;
    }
    .TrendingRubrik ul li.tabRubrikHL span.anchorTrending a:hover {
        background: #f0f0f0;
        text-decoration: none;
        color: #000;
    }
    .TrendingRubrik ul li.tabRubrikHL span.anchorTrending a:active {
        background: #f0f0f0;
    }
    .TrendingRubrik ul li.tabRubrikHL span.anchorTrending a.selected {
        background: #f0f0f0;
    }
    /* E : TAB RUBRIK HL ======= */
    /* S : INDEX BERITA ============================ */
    .indexBerita {
        background: #fff;
        padding: 5px 10px;
        font: normal 12px Arial, Helvetica, sans-serif;
        color: #000;
        border:1px solid #e7e7e7;
        border-left:none;
        border-right:none;
        width:60%;
        float:left;
    }
    .indexBerita span.titleIndex {
        font: normal 18px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        padding-right: 20px;
    }
    .indexBerita span.tampilBerita a {
        font: normal 12px "OpenSansReguler", Arial, Helvetica, sans-serif;
        color: #fff;
        padding: 5px 10px;
        background: #666;
        text-decoration: none;
        margin-left: 20px;
        display: inline-block;
        border-radius: 3px
    }
    /* E : INDEX BERITA ============================ */
    /* S : WELCOME PAGE ================================================================================================================= */
    .appendRadioAustralia2 {
        display:none;
    }
    .appendRadioAustralia1 {
        display:block;
    }
    .appendBBC2 {
        display:none;
    }
    .appendBBC1 {
        display:block;
    }
    .appendSmallLogoKompas2 img {
        max-width:100%;
    }
    .appendContentRight {
        display:block;
    }
    .appendContentRight-768 {
        display:none;
    }
    .appendR1 {
        display: block;
    }
    .appendR2 {
        display: none;
    }
    .adsMR1Lipsus1 {
        display: block;
    }
    .adsMR1Lipsus2 {
        display: none;
    }
    .appendBanner1 {
        display: block;
    }
    .appendBanner2 {
        display: none;
    }
    .appendR1akt1 {
        display: block;
    }
    .appendR1akt2 {
        display: none;
    }
    .appendR1akt2-arsip {
        display: none;
    }
    .appendR2Rubrik1 {
        display: block;
    }
    .appendR2Rubrik2 {
        display: none;
    }
    .appendR2Rubrik2-arsip {
        display: none;
    }
    .appendTerbaruTerkomentariRubrik1 {
        display: block;
    }
    .appendTerbaruTerkomentariRubrik2 {
        display: none;
    }
    .appendR3Rubrik1 {
        display: block;
    }
    .appendR3Rubrik2 {
        display: none;
    }
    .appendR3Rubrik2-arsip {
        display: none;
    }
    .appendHealthEntertainment1 {
        display: block;
    }
    .appendHealthEntertainment2 {
        display: none;
    }
    .appendKompasiana1 {
        display: block;
    }
    .appendKompasiana2 {
        display: none;
    }
    .appendSearch1 {
        display: block;
    }
    .appendSearch2 {
        display: none;
        float: right;
    }
    .appendSLogo1 {
        display: block;
    }
    .appendSLogo2 {
        display: none;
    }
    .appendSubMenuMobile1 {
        display: block;
    }
    .appendSubMenuMobile2 {
        display: none;
    }
    .appendSubMenuMobile3 {
        display: none;
    }
    .appendTrending1 {
        display: block;
    }
    .appendTrending2 {
        display: none;
    }
    .appendDate2 {
        display: none;
        padding: 0px 0 0 0;
    }
    .appendDate1 {
        display: block;
        padding-top:25px;
    }
    .appendTerbaru {
        display:none;
    }
    .appendTerbaruBox {
	display:block;
}
    .hide {
        display: none;
    }
    .kompasContainer {
        width: 1100px;
        margin: 0 auto;
        padding: 0px 20px;
    }
    /* header css ------------------------- */
    bannerTopMobile {
        width: 320px;
        height: 60px;
        margin: 10px auto 0 auto;
        background: #ccc;
        display: none;
    }

    .bannerMiddle1Mobile {
        width: 320px;
        height: 60px;
        margin: 10px auto 0 auto;
        background: #ccc;
        display: none;
    }
    .bannerMiddle2Mobile {
        width: 320px;
        height: 60px;
        margin: 10px auto 0 auto;
        background: #ccc;
        display: none;
    }
    .bannerMiddle3Mobile {
        width: 320px;
        height: 60px;
        margin: 10px auto;
        background: #ccc;
        display: none;
    }
    .bannerBottomMobile {
        width: 320px;
        height: 60px;
        margin: 10px auto 0 auto;
        background: #ccc;
        display: none;
    }
    .headerRow1 {
        padding: 0;
        margin: 0 auto;
    }
    .bannerTopOut {
        width: 1100px;
        height: 90px;
        background: #f5f5f5;
        margin: 0 auto;
        padding: 10px 0;
    }
    .bannerTop1 {
        width: 970px;
        height: 90px;
        margin: 0 auto;
    }
    .harkomRow1 {
        font: normal 0.85em "Lucida Grande","Lucida Sans Unicode", sans-serif Arial, Helvetica, sans-serif;
        color: #000;
    }
    .harkomRow1 a {
        text-decoration: none;
        color: #000;
    }
    .harkomRow1 a:hover {
        text-decoration: underline;
    }
    .hariankompas_kompastv {
        width: 250px;
        float: left;
        padding-top: 20px;
    }
    .p10wp {
        padding-top: 10px;
    }
    .hariankompas_kompastvB {
        display: none;
    }
    .hariankompas_kompastv h6 {
        font: normal 10px "Lucida Grande","Lucida Sans Unicode", sans-serif Arial, Helvetica, sans-serif;
        color: #999;
        margin: 0;
        padding: 0px 0;
    }
    .logoKompascom {
        width: 550px;
        height: 80px;
        text-align: center;
        margin: 0 auto;
        float: left;
        padding-top: 5px;
    }
    .logoKompascom a {
        text-decoration: none;
        border: none;
        text-align: center;
        width: 428px;
        margin: 0 auto;
        display: block;
    }
    .reg_search {
        width: 300px;
        float: left;
        padding-top: 10px;
    }
    .reg_searchRow1 {
        font: normal 0.75em "Lucida Grande","Lucida Sans Unicode", sans-serif Arial, Helvetica, sans-serif;
        color: #000;
        padding-bottom: 5px;
    }
    .reg_searchRow1 a {
        text-decoration: none;
        color: #000;
    }
    .reg_searchRow1 a:hover {
        text-decoration: underline;
    }
    .reg_searchRow2 {
        width: 269px;
        height: 32px;
        border: solid 1px #c7c7c7;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/search.jpg) left no-repeat;
        padding-left: 30px;
        position: relative;
    }
    .reg_searchRow2_Close {
        display: none;
    }
    .reg_searchRow2 div.boxSearch {
        width: 170px;
    }
    .reg_searchRow2 div input {
        border: none;
        background: none;
        height: 30px;
        padding: 0 10px;
        width: 190px;
        font: normal 0.94em "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #a0a0a0;
        outline: none;
    }
    .reg_searchRow2 div.goSearch {
        padding: 3px 3px 0 0;
    }
    .reg_searchRow2 div a {
        background: #e74f1d;
        display: inline-block;
        text-decoration: none;
        border-radius: 4px;
        padding: 4px 7px;
        color: #fff;
        font: bold 1em Arial, Helvetica, sans-serif;
    }
    #km2menu {
        display: none;
    }
    #km2menuA {
        display: none;
        float: left;
        width: 120px;
    }
    #km2menu2 {
        display: none;
    }
    .kompasMenu {
        border-top: solid 1px #eaeaea;
        width: 1100px;
        margin: 0 auto;
    }
    .kompasMenu ul#mainMenu {
        margin: 0 auto;
        overflow: hidden;
        text-align: left;
    }
    .headerRow3 {
        border-bottom: solid 3px #e54210;
        width: 1100px;
        margin: 0px auto 0 auto;
    }
    .kompasMenu ul#mainMenu li {
        list-style-type: none;
        display: inline-block;
        cursor: pointer;
    }
    .kompasMenu ul#mainMenu li a {
        text-decoration: none;
        text-transform: uppercase;
        font: normal 14px/25px "OpenSansExtrabold", Arial, Helvetica, sans-serif;
        color: #000000;
        cursor: pointer;
    }
    .kompasMenu ul#mainMenu li a:hover {
        background: #f33e07;
        color: #fff;
    }
    .kompasMenu ul#mainMenu li a.selected {
        background: #f33e07;
        color: #fff;
    }
    .kompasMenu ul#mainMenu li a#menuLeft {
        padding: 5px 6px;
        display: inline-block;
    }
    @-moz-document url-prefix() {
        .kompasMenu ul#mainMenu li a#menuLeft {
            padding: 5px 6px;
            display: inline-block;
        }
    }
    .homeIndex {
        width: 32px;
        height: 32px;
        float: left;
    }
    .homeIndex a img {
        width: 28px;
        height: 28px;
        display: inline-block;
        padding: 4px;
    }
    .kompasMenu2 {
        display: none;
    }
    .kompasMenu {
        display: block;
    }
    .mainContent {
    }
    .breakingNews {
        border-top: solid 1px #dadada;
        border-bottom: solid 1px #dadada;
        margin-top: 5px;
    }
    .breakingNews h5 {
        margin: 10px 0 0 0;
        padding: 2px 0 4px 5px;
        font: normal 0.625em "OpenSansbold", Arial, Helvetica, sans-serif;
        color: #fff;
        display: inline-block;
        float: left;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/bgBreak.jpg) no-repeat top center;
        width: 100px;
        text-transform: uppercase;
    }
    .breakingNews h1, .breakingNews h1 a {
        margin: 0;
        padding: 0px 0 0 10px;
        font: normal 28px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        display: inline-block;
        float: left;
        overflow: hidden;
        width: 85%;
        height: 43px;
        text-decoration: none;
    }
    .breakingNews h1 a:hover {
        text-decoration: underline;
    }
    .mainContentIn {
        padding-top: 10px;
    }
    .contentLeftKompascom {
        float: left;
        width: 780px;
        padding-right: 20px;
    }
    .contentRightKompascom {
        float: left;
    }
    .contentRightKompascom-alt2 {
        float: left;
    }
    .headline {
        width: 780px;
        height: 517px;
        margin: 0px 0 0 0;
        background: #f5f5f5;
        float: left;
        position: relative;
        border: solid 1px #dedede;
        overflow:hidden;
    }
    .boxBannerR1akt {
        float: right;
        width: 300px;
    }
    .boxBannerR23 {
        width: 300px;
        float: right;
    }
    .bannerR {
        width: 300px;
        height: 250px;
        float: right;
        display:block;
    }
    .bannerR2 {
        width: 300px;
        height: 250px;
        float: right;
        margin-top: 20px;
        overflow: hidden;
        position: relative;
    }
    .bannerR3 {
        width: 300px;
        height: 250px;
        float: right;
        margin-top: 20px;
    }
    .aktivitas {
        width: 300px;
        height: 250px;
        background: #ccc;
        float: right;
        margin-top: 20px;
        overflow: hidden;
    }
    .aktivitas img {
        width: 100%;
        height: auto;
    }
    .moreHL {
        width: 522px;
        height: 518px;
        background: #fff;
        float: left;
        margin-top: 20px;
        border: solid 1px #dedede;
        position: relative;
    }
    .topikPilihan {
        width: 235px;
        height: 508px;
        background: #f4f4f4;
        float: left;
        margin-top: 20px;
        border: solid 1px #dedede;
        border-left: none;
        padding: 10px 0 0 20px;
    }
    .zone1 {
        width: 350px;
        height: 80px;
        background: orange;
        margin-top: 20px;
        float: left;
        font-family: Arial, Helvetica, sans-serif;
    }
    .zone2 {
        width: 350px;
        height: 80px;
        background: #ccc;
        margin-top: 20px;
        margin-left: 40px;
        float: left;
        font-family: Arial, Helvetica, sans-serif;
        margin-right: 15px;
    }
    .zone3 {
        width: 350px;
        height: 80px;
        background: #940e0e;
        margin-top: 20px;
        float: left;
        margin-left: 25px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .zoneLeft {
        width: auto;
        height: auto;
        float: left;
    }
    .zoneLeft img {
        width: 140px;
        height: 80px;
    }
    .zoneRight {
        width: 150px;
        height: 70px;
        overflow: hidden;
        float: left;
        padding: 10px;
    }
    .ZoneFont1 a {
        text-decoration: none;
        font: bold 14px Arial, Helvetica, sans-serif;
    
        color: #ffc937;
}
    .ZoneFont2 a {
        text-decoration: none;
        font: normal 12px Arial, Helvetica, sans-serif;
    
        color: #fff;
}
    .ZoneFont2 {
        padding: 5px 0 0 0;
        height:43px;
        overflow:hidden;
    }
    .ZoneFont1 a:hover {
        text-decoration: underline;
    }
    .ZoneFont2 a:hover {
        text-decoration: underline;
    }
    .mr1Lipsus {
        float: left;
    }
    .mr1 {
        width: 300px;
        height: 250px;
        background: #ccc;
        margin-top: 20px;
    }
    .secondaryR23 {
        float: left;
        display: none;
    }
    .lipsusArea {
        width: 300px;
        height: 250px;
        background: #ccc;
        margin-top: 20px;
    }
    .terbaruTerkomentari {
        width: 400px;
        height: 527px;
        background: #fff;
        margin: 20px 0 0 25px;
        float: left;
        /*	overflow: hidden;*/
        position: relative;
        overflow: hidden;
}
    .terpopuler {
        width: 350px;
        height: 520px;
        background: #fff;
        margin: 20px 0 0 25px;
        float: left;
    }
    .border2 {
        width: 100%;
        height: auto;
        border-bottom: solid 1px #e2e2e2;
        margin-top: 20px;
    }
    .subKanal {
        float: left;
        width: 610px;
    }
    .subKanal2 {
        float: left;
        width: 490px;
    }
    .teknoBox {
        width: 295px;
        height: 390px;
        background: #fff;
        float: left;
        margin-top: 20px;
    }
    .bolaBox {
        width: 295px;
        height: 390px;
        background: #fff;
        float: left;
        margin: 20px 0 0 20px;
    }
    .otomotifBox {
        width: 295px;
        height: 390px;
        background: #fff;
        float: left;
        margin-top: 32px;
    }
    .femaleBox {
        width: 295px;
        height: 390px;
        background: #fff;
        float: left;
        margin: 32px 0 0 20px;
    }
    .todayPhoto {
        width: 470px;
        height: 390px;
        background: #fff;
        float: left;
        margin: 20px 0 0 20px;
        border-top: solid 3px #000;
        padding-top: 5px;
    }
    .kompasVideo {
        width: 470px;
        height: 390px;
        background: #fff;
        float: left;
        margin: 25px 0 0 20px;
        border-top: solid 3px #000;
        padding-top: 5px;
    }
    .bannerCenter {
        width: 970px;
        margin: 0 auto;
        padding: 20px 0;
    }
    .bannerCenter1 {
        width: 468px;
        height: 60px;
        background: grey;
        float: left;
    }
    .bannerCenterRubrik {
        width: 780px;
        margin: 0 auto;
        padding: 10px 0 30px 0;
    }
    .bannerCenter1Rubrik {
        width: 468px;
        height: 60px;
        background: grey;
        margin: 0 auto;
    }
    .bannerCenter2Rubrik {
        width: 468px;
        height: 60px;
        background: grey;
        margin: 0 auto;
    }
    .secondarybannerCenter {
        display: none;
    }
    .bannerCenter2 {
        width: 468px;
        height: 60px;
        background: grey;
        margin-left: 33px;
        float: left;
    }
    .ekonomiBox {
        width: 428px;
        height: 348px;
        background: #fff;
        margin-top: 20px;
        float: left;
        border: solid 1px #ccc;
        padding: 20px;
    }
    .healthBox {
        width: 295px;
        height: 390px;
        background: #fff;
        float: left;
        margin: 20px 0 0 20px;
    }
    .entertainmentBox {
        width: 295px;
        height: 390px;
        background: #fff;
        float: left;
        margin: 20px 0 0 20px;
    }
    .boxKomTraPro {
        padding-top: 20px;
    }
    .kompasianaBox {
        width: 260px;
        height: 365px;
        padding: 15px;
        background: #fff;
        float: left;
        margin: 20px 0 0 0px;
        overflow: hidden;
        border: solid 1px #ccc;
    }
    .travelBox {
        width: 468px;
        height: 395px;
        background: #f4f4f4;
        float: left;
        margin: 20px 0 0 20px;
        border: solid 1px #e0e0e0;
    }
    .propertiBox {
        width: 295px;
        height: 390px;
        background: #fff;
        float: left;
        margin: 20px 0 0 20px;
    }
    .bannerAdB {
        width: 1100px;
        height: 90px;
        background: #f5f5f5;
        margin-top: 20px;
		padding:10px 0;
    }
    .kanalBottom {
        width: 1100px;
        height: auto;
        background: #f4f4f4;
        margin: 20px auto 20px auto;
        padding: 5px 0;
    }
    .footer {
        width: 1040px;
    }
    .footerMenu {
        float: left;
        width: 94%;
        float: left;
        padding: 20px 0 0 0px;
        text-align: left;
    }
    .LogoKG {
        width: 230px;
        height: auto;
        float: right;
        padding: 10px 10px 0 0px;
    }
    .hAds {
        width: 1100px;
        height: auto;
        background: #ccc;
        margin: 20px auto 0 auto;
        position: fixed;
        bottom: 0;
        z-index: 999999;
    }
    a.closeAds {
        padding: 1px 5px;
        display: block;
        position: absolute;
        top: -16px;
        right: 0;
        font: normal 10px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
        background: #000;
    }
    /* cutting in ============================================================= */
    /* headline ============================================ */
    .bigImgHL {
        width: 780px;
        height: 391px;
        overflow: hidden;
        position: relative;
		z-index:8;
    }
	.bigImgHLCangkang {
        width: 780px;
        height: 391px;
        overflow: hidden;
        position: relative;
    }
    .bigImgHL img {
        width: 780px;
        height: 390px;
        overflow: hidden;
		z-index:8;
	}
	
    .titleBigHL {
        position: absolute;
        bottom: 0px;
        padding-bottom: 30px;
        padding-top: 30px;
        /*-webkit-box-shadow: inset 0px -70px 40px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px -70px 40px 0px rgba(0, 0, 0, 0.5);*/
        height: auto;
        width: 100%;
        z-index: 1;
    }
    .timeView {
        font: normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        position: relative;
        z-index: 2;
        padding-left: 38px;
        padding-top: 10px;
    }
    .timeView h6 {
        margin: 0;
        padding: 2px 0px;
        font: normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        display: inline-block;
        position: relative;
        top: 0px;
        z-index: 20;
    }
    .timeView img {
        width: 17px;
        height: 12px;
        z-index: 20;
        position: relative;
        padding: 0 3px 2px 0;
    }
    .titleBigHL h1 {
        margin: 0 0 10px 40px;
        padding: 2px 10px;
        font: normal 14px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        background: red;
        display: inline-block;
        position: relative;
        top: 0px;
        z-index: 20;
    }
    .titleBigHL:after {
        content:"\0020";
        display: block;
        position: absolute;
        width: 100%;
        height: 1px;
        /* when 0 no shadow is displayed*/
        -webkit-box-shadow: 0 0 80px 100px rgba(0, 0, 0, 0.7);
        box-shadow: 0 0 80px 100px rgba(0, 0, 0, 0.7);
        bottom: 0;
    }
    .titleBigHL a {
        text-decoration: none;
        font: normal 1.75em "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #fff;
        padding: 0px 40px 0px 40px;
        display: block;
        text-shadow: 0px 0px 5px #000000;
        filter: dropshadow(color=#000000, offx=0, offy=0);
        position: relative;
        overflow: hidden;
        max-height: 75px;
        z-index: 2;
    }
    .thumbHL {
        width: 781px;
        height: 130px;
        position: relative;
        z-index: 9;
        background: #f5f5f5;
        border-right: none;
    }
    .listThumbHL {
        width: 19.870%;
        height: 100%;
        border-right: solid 1px #dedede;
        float: left;
        text-align: center;
        padding-top: 5px;
        position: relative;
        font: normal 0.6875em/15px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #666666;
    }
	.listThumbHL:last-child {
        width: 19.870%;
        height: 100%;
        border-right: solid 0px #dedede;
        float: left;
        text-align: center;
        padding-top: 5px;
        position: relative;
        font: normal 0.6875em/15px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #666666;
    }
    .listThumbHL:hover > a img {
        border: solid 4px #72d6ff;
    }
    .listThumbHL:hover > a#titleThumb {
        color: #000;
    }
    .listThumbHL a.selected img {
        border: solid 4px #72d6ff;
    }
    .listThumbHL a img {
        width: 120px;
        height: 60px;
        border: solid 4px #fff;
        margin: 0 auto 2px auto;
    }
    .listThumbHL a {
        display: block;
        text-decoration: none;
        overflow: hidden;
        color: #000;
    }
    .listThumbHL a#titleThumb {
        display: block;
        text-decoration: none;
        overflow: hidden;
        color: #666666;
        padding: 0 12px;
        height: 45px;
    }
    .listThumbHL a:hover {
        text-decoration: underline;
    }
    a#arrowThumb {
        display: block;
        position: absolute;
        width: 100%;
        height: 10px;
        top: -10px;
        z-index: 99999999;
    }
    .listThumbHL:hover > a#arrowThumb {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/hlHover.png) no-repeat top center;
    }
    a#arrowThumb.selected {
        display: block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/hlHover.png) no-repeat top center;
        position: absolute;
        width: 100%;
        height: 10px;
        top: -10px;
        z-index: 99999999;
    }
    /* more headline ====================================== */
    .boxListMoreHL {
        width: 100%;
        height: 490px;
        overflow: hidden;
    }
    .submit a {
        display: inline-block;
        font: normal 12px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        background: #333;
        padding: 2px 10px;
        text-decoration: none;
        border-radius: 3px;
        margin: 5px 5px 0 0;
        cursor:pointer;
    }
    .klikPersonalisasi h1 {
        font: normal 9px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #999;
        margin: 0;
        display: inline-block;
        text-align: right;
        float: right;
        border-radius: 3px;
        cursor: pointer;
        padding: 5px 12px 0px 12px;
        background: #fff;
        position: relative;
        z-index: 9;
        text-transform: uppercase;
    }
    .klikPersonalisasi h1.selected {
        font: normal 9px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #999;
        margin: 0;
        display: inline-block;
        text-align: right;
        float: right;
        border-radius: 3px;
        cursor: pointer;
        padding: 5px 12px 0px 12px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/bgPersonalisasi.jpg) no-repeat left #fff;
        position: relative;
        z-index: 9;
        text-transform: uppercase;
    }
    .klikPersonalisasi h1:hover {
        color: #000;
    }
    .personalisasi {
        padding: 5px 30px 0 0px;
        float: left;
		margin-top:-16px;
		z-index:99999;
    }
    .subPersonalisasi {
        height: auto;
        width: 92%;
        padding: 40px 20px 20px 20px;
        display: none;
        font: normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #000;
        border: solid 1px #ccc;
        border-top: none;
        border-radius: 5px;
        border-left: none;
        border-right: none;
        background: #fff;
        top: 0px;
        right: 0;
        z-index: 8;
        position: absolute;
    }
    .subPersonalisasi h1 {
        margin:20px 0 5px 8px;
        text-align:left;
        font:bold 12px "OpenSansReguler", Arial, Helvetica, sans-serif
    }
    .subPersonalisasi p {
        font:normal 12px "OpenSansReguler", Arial, Helvetica, sans-serif;
        text-align:left;
        margin:0px 0 10px 8px;
    }
    .subPersonalisasi-v2 {
        height: auto;
        width: 92%;
        padding: 40px 20px 20px 20px;
        display: none;
        font: normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #000;
        border: solid 1px #ccc;
        border-top: none;
        border-radius: 5px;
        border-left: none;
        border-right: none;
        background: #fff;
        top: 0px;
        right: 0;
        z-index: 8;
        position: absolute;
    }
    .subPersonalisasi ul {
        margin: 0;
        padding: 0 0 15px 0;
        width: 500px;
        float: left;
    }
    .subPersonalisasi ul li {
        list-style-type: none;
        padding: 7px 7px;
        display: inline-block;
        float: left;
    }
    .topHL {
        height: 22px;
        width: 100%;
        text-align: center;
        padding-left: 20px;
    }
    .topHL h1#tophl {
        font: bold 14px "OpenSansReguler", Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
        display: inline-block;
        padding: 0px 5px;
        margin-top: -9px;
        float: left;
        position: absolute;
        z-index: 9;
        left:0;
        right:0;
        margin-left:auto;
        margin-right:auto;
        height: 17px;
        overflow: hidden;
    }
    .topHL h1#tophl span {
        background: #fff;
        padding:0 5px 0 5px;
    }
    span.personalisasiV2 {
        background: #fff;
        padding:0 5px 0 5px;
        cursor:pointer;
    }
    .listMoreHL {
        width: 124px;
        height: 110px;
        text-align: center;
        float: left;
        padding: 10px 0 0px 38px;
    }
    .listMoreHL a {
        font: normal 10px "OpenSansregular", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        overflow: hidden;
        display: block;
        height: 42px;
        padding-top: 5px;
    
}
    .listMoreHL a:hover {
        text-decoration: underline;
    }
    .listMoreHL img {
        width: 124px;
        height: 62px;
        overflow: hidden;
        padding: 5px 0 0 0;
    }
    .listMoreHL p {
        font: normal 0.75em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0;
        padding: 5px 0 0 0;
        overflow: hidden;
        height: 38px;
    }
    .listMoreHL a.listMoreHLP {
        font: normal 0.75em/22px "OpenSansBold", "Lucida Grande", Arial, Helvetica, sans-serif;
        color: #330000;
        margin: 0;
        padding: 5px 0 0 0;
        text-transform: uppercase;
        overflow: hidden;
        height: 100px;
    }
    /* topik pilihan ====================================== */
    .topikPilihan h1 {
        font: normal 14px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        margin: -20px 0 0 50px;
        padding: 0 7px 2px 7px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/repeatTopil.gif) bottom left repeat-x;
        display: inline-block;
		
	}
    @-moz-document url-prefix() { 
  .topikPilihan h1 {
        font: normal 14px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        margin: -21px 0 0 50px;
        padding: 0 7px 2px 7px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/repeatTopil.gif) bottom left repeat-x;
        display: block;
		
	}
}
    
    span.noTopil {
        font: normal 1.25em "OpenSansRegular", Arial, Helvetica, sans-serif;	
        color: #fec287;
        display: table-cell;
        vertical-align: middle;
        float: left;
    }
    span.titleTopil {
        display: table-cell;
        vertical-align: middle;
        height: 35px;
        overflow: hidden;
        float: left;
    }
    span.titleTopil a {
        font: normal 0.8125em/18px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        display: table-cell;
        padding: 0px 0 4px 0px;
        vertical-align: middle;
        width: auto;
        height: 29px;
        overflow: hidden;
    }
    span.titleTopil a:hover {
        text-decoration: underline;
    }
    .listTopikPilihan {
        border-bottom: dashed 1px #dadada;
        width: 220px;
        padding: 9px 0;
    }
    .listTopikPilihan:last-child {
        border-bottom: none;
    }
    /* terbaru terkomentari ==================== */
    .indexTerbaru {
        position: absolute;
        right: 0;
        top: 10px;
        right: 5px;
        z-index: 20;
    }
    .indexTerbaru a {
        text-decoration: none;
        color: #000;
        font: normal 10px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
    }
    .indexTerbaru a:hover {
        text-decoration: underline;
    }
    .tabingTop1 {
        width: 100%;
        height: 36px;
        padding-bottom: 0px;
        position: relative;
    }
    .listTerbarkom {
        border-bottom: dotted 1px #ccc;
        padding: 8.7px 0;
        height: 35px;
    }
    span.titleTerbakom a {
        font: normal 0.8125em "OpenSansSemibold", "Lucida Grande", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
/*        display: inline-block;*/
/*        max-width: 320px;*/
        height: 37px;
        overflow: hidden;
        padding: 0px 10px 0 0;
    
        vertical-align: middle;
}
    span.titleTerbakom a:hover {
        text-decoration: underline;
    }
    span.timeTitle1 {
        font: normal 0.625em/1.8em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #ff9900;
        padding: 0px 0 0 0px;
    
        width: 50px;
        display: inline-block;
}
    ul.tabs {
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: 2;
    }
    .borderBottomTabs {
        width: 100%;
        height: 26px;
        border-bottom: solid 1px #c1c1c1;
        position: absolute;
        z-index: 1;
    }
    ul.tabs li {
        list-style-type: none;
        display: inline-block;
    }
    ul.tabs li a {
        text-decoration: none;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/bgTab2.jpg) repeat-x;
        font: normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        padding: 4px 10px 3px 10px;
        height: 27px;
    }
    ul.tabs li a:active {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/tabing2.jpg) no-repeat bottom center, url(http://assets.kompas.com/data/2013/kompascom/images/bgHoverTab2.jpg) repeat-x;
    }
    ul.tabs li a.current {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/tabing2.jpg) no-repeat bottom center, url(http://assets.kompas.com/data/2013/kompascom/images/bgHoverTab2.jpg) repeat-x;
    }
    /* terpopuler ================================== */
    .listTerpopuler {
        border-bottom: solid 1px #ebebeb;
        padding: 9px 0;
    }
    .listTerpopuler:last-child {
        border: none;
    }
    .imgTerpopuler {
        float: left;
        width: 62px;
        height: 62px;
        overflow: hidden;
    }
    .imgTerpopuler img {
        width: auto;
        height: 62px;
        overflow: hidden;
        position:relative;
        left:-20px;
    }
    .titleBoxTerpopuler {
        width: 75%;
        height: 62px;
        float: left;
        margin-left:10px;
    }
    .terpopuler h1 {
        font: bold 1.125em Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0;
        padding: 0px 0 0px 0;
    }
    .titleBoxTerpopuler h6 {
        margin: 0;
        padding: 0;
        font: normal 0.625em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #f09003;
    }
    span.titleTerpopuler a {
        text-decoration: none;
        font: normal 0.8125em/18px 'opensanssemibold',"Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        display: inline-block;
        min-width: 260px;
        max-width: 265px;
        max-height: 35px;
        overflow: hidden;
    }
    span.titleTerpopuler a:hover {
        text-decoration: underline;
    }
    .viewTerpopuler {
        font: normal 0.625em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #f09003;
    }
    /* tekno ============================================== */
    .bigBoxTekno {
        width: 292px;
        height: 292px;
        position: relative;
        overflow:hidden;
    }
    .imgBoxTekno img {
        width: 570px;
        height: 292px;
        overflow: hidden;
        position: absolute;
        z-index: 0;
        right:-180px;
    }
    .tagTekno {
        font: bold 1.125em Arial, Helvetica, sans-serif;
        color: #fff;
        background: #ff6600;
        position: absolute;
        z-index: 1;
        padding: 5px 10px;
    }
    .titleTekno {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: relative;
        z-index: 3;
        width: 260px;
        margin: 0 auto;
        padding: 10px 0;
    }
    .titleTekno a {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
        display: block;
        max-height: 45px;
        overflow: hidden;
    }
    .titleTekno a:hover {
        text-decoration: underline;
    }
    .boxOutTekno {
        position: absolute;
        z-index: 1;
        height: auto;
        width: 100%;
        bottom: 0;
        padding: 0px 0;
    }
    .boxTitleTekno {
    position: absolute;
	z-index: 2;
	opacity: 0.8;
	width: 100%;
	height: 40px;
    }
	.boxTitleTekno:after {
        bottom: 0;
		box-shadow: 0 0 40px 40px #000000;
		content: " ";
		display: block;
		height: 0px;
		position: absolute;
		width: 100%;
    }
    .listTekno ul {
        margin: 0;
        padding: 5px 0 0px 0px;
    }
    .listTekno ul li {
        background: url(http://assets.kompas.com/data/2013/news/images/artikel/arrow-ter.gif) left -7px no-repeat;
        list-style-type: none;
        margin: 0;
        padding: 5px 0 5px 15px;
        max-height:40px;
        overflow:hidden;
    }
    .listTekno ul li a {
        font: normal 0.85em/1.4em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        max-height: 40px;
        overflow: hidden;
        display: inline-block;
    }
    .listTekno ul li a:hover {
        text-decoration: underline;
    }
    /* Bola ============================================== */
    .bigBoxBola {
        width: 292px;
        height: 292px;
        position: relative;
        overflow:hidden;
    }
    .imgBoxBola img {
        width: 570px;
        height: 292px;
        overflow: hidden;
        position: absolute;
        z-index: 0;
        right:-180px;
    }
    .tagBola {
        font: bold 18px Arial, Helvetica, sans-serif;
        color: #fff;
        background: #009933;
        position: absolute;
        z-index: 1;
        padding: 5px 10px;
    }
    .titleBola {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: relative;
        z-index: 3;
        width: 260px;
        margin: 0 auto;
        padding: 10px 0;
    }
    .titleBola a {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
        display: block;
        max-height: 45px;
        overflow: hidden;
    }
    .titleBola a:hover {
        text-decoration: underline;
    }
    .boxOutBola {
        position: absolute;
        z-index: 1;
        height: auto;
        width: 100%;
        bottom: 0;
        padding: 0px 0;
    }
    .boxTitleBola {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 40px;
		opacity:0.8;
    }
	.boxTitleBola:after {
		bottom: 0;
		box-shadow: 0 0 40px 40px #000000;
		content: " ";
		display: block;
		height: 0px;
		position: absolute;
		width: 100%;
	}
    .listBola ul {
        margin: 0;
        padding: 5px 0 0px 0px;
    }
    .listBola ul li {
        background: url(http://assets.kompas.com/data/2013/news/images/artikel/arrow-ter.gif) left -7px no-repeat;
        list-style-type: none;
        margin: 0;
        padding: 5px 0 5px 15px;
    }
    .listBola ul li a {
        font: normal 0.85em/1.4em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        max-height: 40px;
        overflow: hidden;
        display: inline-block;
    }
    .listBola ul li a:hover {
        text-decoration: underline;
    }
    /* Otomotif ============================================== */
    .bigBoxOtomotif {
        width: 292px;
        height: 292px;
        position: relative;
        overflow:hidden;
    }
    .imgBoxOtomotif img {
        width: 570px;
        height: 292px;
        overflow: hidden;
        position: absolute;
        z-index: 0;
        right:-180px;
    }
    .tagOtomotif {
        font: bold 18px Arial, Helvetica, sans-serif;
        color: #fff;
        background: #ff0000;
        position: absolute;
        z-index: 1;
        padding: 5px 10px;
    }
    .titleOtomotif {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: relative;
        z-index: 3;
        width: 260px;
        margin: 0 auto;
        padding: 10px 0;
    }
    .titleOtomotif a {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
        display: block;
        max-height: 45px;
        overflow: hidden;
    }
    .titleOtomotif a:hover {
        text-decoration: underline;
    }
    .boxOutOtomotif {
        position: absolute;
        z-index: 1;
        height: auto;
        width: 100%;
        bottom: 0;
        padding: 0px 0;
    }
    .boxTitleOtomotif {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 40px;
		opacity:0.8;
    }
	.boxTitleOtomotif:after {
		bottom: 0;
		box-shadow: 0 0 40px 40px #000000;
		content: " ";
		display: block;
		height: 0px;
		position: absolute;
		width: 100%;
	}
    .listOtomotif ul {
        margin: 0;
        padding: 5px 0 0px 0px;
    }
    .listOtomotif ul li {
        background: url(http://assets.kompas.com/data/2013/news/images/artikel/arrow-ter.gif) left -7px no-repeat;
        list-style-type: none;
        margin: 0;
        padding: 5px 0 5px 15px;
    }
    .listOtomotif ul li a {
        font: normal 0.85em/1.4em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        max-height: 40px;
        overflow: hidden;
        display: inline-block;
    }
    .listOtomotif ul li a:hover {
        text-decoration: underline;
    }
    /* Female ============================================== */
    .bigBoxFemale {
        width: 292px;
        height: 292px;
        position: relative;
        overflow:hidden;
    }
    .imgBoxFemale img {
        width: 570px;
        height: 292px;
        overflow: hidden;
        position: absolute;
        z-index: 0;
        right:-180px;
    }
    .tagFemale {
        font: bold 18px Arial, Helvetica, sans-serif;
        color: #fff;
        background: #ff0066;
        position: absolute;
        z-index: 1;
        padding: 5px 10px;
    }
    .titleFemale {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: relative;
        z-index: 3;
        width: 260px;
        margin: 0 auto;
        padding: 10px 0;
    }
    .titleFemale a {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
        display: block;
        max-height: 45px;
        overflow: hidden;
    }
    .titleFemale a:hover {
        text-decoration: underline;
    }
    .boxOutFemale {
        position: absolute;
        z-index: 1;
        height: auto;
        width: 100%;
        bottom: 0;
        padding: 0px 0;
    }
    .boxTitleFemale {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 40px;
		opacity:0.8;
    }
	.boxTitleFemale:after {
		bottom: 0;
		box-shadow: 0 0 40px 40px #000000;
		content: " ";
		display: block;
		height: 0px;
		position: absolute;
		width: 100%;
	}
    .listFemale ul {
        margin: 0;
        padding: 5px 0 0px 0px;
    }
    .listFemale ul li {
        background: url(http://assets.kompas.com/data/2013/news/images/artikel/arrow-ter.gif) left -7px no-repeat;
        list-style-type: none;
        margin: 0;
        padding: 5px 0 5px 15px;
    }
    .listFemale ul li a {
        font: normal 0.85em/1.4em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        max-height: 40px;
        overflow: hidden;
        display: inline-block;
    }
    .listFemale ul li a:hover {
        text-decoration: underline;
    }
    /* today =========================================== */
    .tagTopPhotoL {
        font: bold 18px Arial, Helvetica, sans-serif;
        color: #000;
        float: left;
        padding-bottom: 5px;
    }
    .readTopPhotoR {
        float: right;
        font: normal 0.6875em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #cc0000;
    }
    .readTopPhotoR a {
        text-decoration: none;
        color: #cc0000;
    }
    .readTopPhotoR a:HOVER {
        text-decoration: underline;
    }
    .bigImgToday {
        position: relative;
        width: 470px;
        height: 235px;
        overflow: hidden;
        padding-bottom: 0px;
        margin-bottom: 2px;
        background: #fff;
    }
    .bigImgToday img {
        width: 100%;
        height: auto;
        overflow: hidden;
        position: absolute;
    }
    .smallImgToday .sLeft {
        position: relative;
        width: 234px;
        height: 117px;
        float: left;
    
        overflow: hidden;
}
    .smallImgToday .sLeft img {
        width: 234px;
        height: auto;
        position: absolute;
        overflow: hidden;
    }
    .smallImgToday .sRight {
        position: relative;
        width: 234px;
        height: 117px;
        float: right;
    
        overflow: hidden;
}
    .smallImgToday .sRight img {
        width: 234px;
        height: auto;
        position: absolute;
        overflow: hidden;
    }
    .titleTodayPhoto {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: relative;
        z-index: 3;
        width: 90%;
        margin: 0 auto;
        padding: 10px 0;
    }
    .titleTodayPhoto a {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
    }
    .titleTodayPhoto a:hover {
        text-decoration: underline;
    }
    .boxOutTodayPhoto {
        position: absolute;
        z-index: 1;
        height: auto;
        width: 100%;
        bottom: 0;
        padding: 0px 0;
        bottom: 0px;
    }
    .boxTitleTodayPhoto {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 40px;
		opacity:0.8;
    }
	.boxTitleTodayPhoto:after {
		bottom: 0;
		box-shadow: 0 0 40px 40px #000000;
		content: " ";
		display: block;
		height: 0px;
		position: absolute;
		width: 100%;
	}
    .titleTodayPhoto2 {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: relative;
        z-index: 3;
        width: 90%;
        margin: 0 auto;
        padding: 10px 0;
    }
    .titleTodayPhoto2 a {
        font: normal 12px/16px "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
        max-height: 34px;
        overflow: hidden;
        display: block;
    }
    .titleTodayPhoto2 a:hover {
        text-decoration: underline;
    }
    .boxOutTodayPhoto2 {
        position: absolute;
        z-index: 99999;
        height: auto;
        width: 100%;
        bottom: 0;
        padding: 0px 0;
    }
    .boxTitleTodayPhoto2 {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 40px;
		opacity:0.8;
    }
	.boxTitleTodayPhoto2:after {
		bottom: 0;
		box-shadow: 0 0 40px 40px #000000;
		content: " ";
		display: block;
		height: 0px;
		position: absolute;
		width: 100%;
	}
    /* video =========================================== */
    .tagTopVideoL {
        font: bold 18px Arial, Helvetica, sans-serif;
        color: #000;
        float: left;
        padding-bottom: 5px;
    }
    .readTopVideoR {
        float: right;
        font: normal 0.6875em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #cc0000;
    }
    .readTopVideoR a {
        text-decoration: none;
        color: #cc0000;
    }
    .readTopVideoR a:HOVER {
        text-decoration: underline;
    }
    .bigImgToday2 img {
        width: 478px;
        height: 239px;
        overflow: hidden;
        padding-bottom: 2px;
    }
    .smallImgToday2 .sLeft {
        position: relative;
        width: 234px;
        height: 117px;
        float: left;
    }
    .smallImgToday2 .sLeft img {
        width: 234px;
        height: 117px;
        position: absolute;
        overflow: hidden;
    }
    .smallImgToday2 .sRight {
        position: relative;
        width: 234px;
        height: 117px;
        float: right;
    }
    .smallImgToday2 .sRight img {
        width: 234px;
        height: 117px;
        position: absolute;
        overflow: hidden;
    }
    /* ekonomi ================================================= */
    .imgEkonomi {
        width:210px;
        height:210px;
        overflow:hidden;
        float:left;
    }
    .imgEkonomi img {
        width: auto;
        height: 210px;
        overflow: hidden;
        float: left;
        position:relative;
        left:-100px;
    }
    .titleEkonomi {
        width: 185px;
        height: 210px;
        overflow: hidden;
        float: left;
        padding-left: 20px;
    }
    .tagEkonomi {
        font: bold 1.125em Arial, Helvetica, sans-serif;
        color: #fff;
        background: #006600;
        position: absolute;
        z-index: 1;
        padding: 5px 10px;
    }
    a.tEkonomi {
        text-decoration: none;
        font: normal 1em "OpenSansSemibold", "Lucida Grande", Arial, Helvetica, sans-serif;
        color: #000;
        display: block;
        padding-top: 40px;
    }
    .titleEkonomi a:hover {
        text-decoration: underline;
    }
    .titleEkonomi p {
        text-decoration: none;
        font: normal 0.8125em/20px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
    }
    .graphEkonomi {
        padding-top: 10px;
    
}
    /* Health ============================================== */
    .bigBoxHealth {
        width: 292px;
        height: 292px;
        position: relative;
        overflow:hidden;
    }
    .imgBoxHealth img {
        width: 570px;
        height: 292px;
        overflow: hidden;
        position: absolute;
        z-index: 0;
        right:-180px;
    }
    .tagHealth {
        font: bold 1.125em Arial, Helvetica, sans-serif;
        color: #fff;
        background: #04ae68;
        position: absolute;
        z-index: 1;
        padding: 5px 10px;
    }
    .titleHealth {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: relative;
        z-index: 3;
        width: 260px;
        margin: 0 auto;
        padding: 10px 0;
    }
    .titleHealth a {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
        display: block;
        max-height: 45px;
        overflow: hidden;
    }
    .titleHealth a:hover {
        text-decoration: underline;
    }
    .boxOutHealth {
        position: absolute;
        z-index: 1;
        height: auto;
        width: 100%;
        bottom: 0;
        padding: 0px 0;
    }
    .boxTitleHealth {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 40px;
		opacity:0.8;
    }
	.boxTitleHealth:after {
		bottom: 0;
		box-shadow: 0 0 40px 40px #000000;
		content: " ";
		display: block;
		height: 0px;
		position: absolute;
		width:100%;
	}
    .listHealth ul {
        margin: 0;
        padding: 5px 0 0px 0px;
    }
    .listHealth ul li {
        background: url(http://assets.kompas.com/data/2013/news/images/artikel/arrow-ter.gif) left -7px no-repeat;
        list-style-type: none;
        margin: 0;
        padding: 5px 0 5px 15px;
    }
    .listHealth ul li a {
        font: normal 0.85em/1.4em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        max-height: 40px;
        overflow: hidden;
        display: inline-block;
    }
    .listHealth ul li a:hover {
        text-decoration: underline;
    }
    /* Entertainment ============================================== */
    .bigBoxEntertainment {
        width: 100%;
        height: 292px;
        position: relative;
        overflow:hidden;
    }
    .imgBoxEntertainment img {
        width: 570px;
        height: 292px;
        overflow: hidden;
        position: absolute;
        z-index: 0;
        right:-180px;
    }
    .tagEntertainment {
        font: bold 1.125em Arial, Helvetica, sans-serif;
        color: #fff;
        background: #3399ff;
        position: absolute;
        z-index: 1;
        padding: 5px 10px;
    }
    .titleEntertainment {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: relative;
        z-index: 3;
        width: 260px;
        margin: 0 auto;
        padding: 10px 0;
    }
    .titleEntertainment a {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
        display: block;
        max-height: 45px;
        overflow: hidden;
    }
    .titleEntertainment a:hover {
        text-decoration: underline;
    }
    .boxOutEntertainment {
        position: absolute;
        z-index: 1;
        height: auto;
        width: 100%;
        bottom: 0;
        padding: 0px 0;
    }
    .boxTitleEntertainment {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 40px;
		opacity:0.8;
    }
	.boxTitleEntertainment:after {
		bottom: 0;
		box-shadow: 0 0 40px 40px #000000;
		content: " ";
		display: block;
		height: 0px;
		position: absolute;
		width: 100%;
	}
    .listEntertainment ul {
        margin: 0;
        padding: 5px 0 0px 0px;
    }
    .listEntertainment ul li {
        background: url(http://assets.kompas.com/data/2013/news/images/artikel/arrow-ter.gif) left -7px no-repeat;
        list-style-type: none;
        margin: 0;
        padding: 5px 0 5px 15px;
    }
    .listEntertainment ul li a {
        font: normal 0.85em/1.4em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        max-height: 40px;
        overflow: hidden;
        display: inline-block;
    }
    .listEntertainment ul li a:hover {
        text-decoration: underline;
    }
    /* kompasiana ================================================ */
    .topKompasianaLeft {
        float: left;
    }
    .topKompasianaRight {
        float: right;
        font: normal 0.75em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #b1b1b1;
        padding-top: 3px;
    }
    .listKompasiana {
        padding-top: 10px;
    }
    .listKompasiana ul {
        margin: 0;
        padding: 0;
    }
    .listKompasiana ul li {
        list-style-type: none;
        border-bottom: dotted 1px #ccc;
        height: 48px;
        overflow: hidden;
    }
    .listKompasiana ul li:last-child {
        border-bottom: dotted 0px #ccc;
    }
    .listKompasiana ul li a {
        font: normal 0.8125em/1.6em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        padding: 5px 0 4px 0;
        height: 40px;
        overflow: hidden;
        display: table-cell;
        vertical-align: middle;
    }
    .listKompasiana ul li a:hover {
        text-decoration: underline;
    }
    /* travel ================================= */
    ul.thumbTravel {
        margin: 0;
        padding: 0;
    }
    ul.thumbTravel li {
        list-style-type: none;
        display: inline-block;
        width: 150px;
        overflow: hidden;
    }
    .listThumbTravel {
        width: 150px;
        height: 100%;
        text-align: center;
        padding-top: 15px;
        float: left;
    }
    .bigThumbTravel {
        width: 100%;
        height: 242px;
        overflow: hidden;
        position: relative;
    }
    .imgBigThumbTravel img {
        width: 484px;
        height: 242px;
        overflow: hidden;
        position: absolute;
    }
    .tagTravel {
        font: bold 1.125em Arial, Helvetica, sans-serif;
        color: #fff;
        background: #00a8a2;
        position: absolute;
        z-index: 1;
        padding: 5px 10px;
    }
    .titleTravel {
        width: 100%;
        height: auto;
        position: absolute;
        z-index: 9;
        bottom: 0;
    }
    .titleTravel a {
        color: #fff;
        text-decoration: none;
        display: block;
        max-height: 45px;
        overflow: hidden;
    }
    .titleTravel a:hover {
        text-decoration: underline;
    }
    .bgTitleTravel {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 9;
    }
	.bgTitleTravel:after {
		bottom: 0;
		box-shadow: 0 0 40px 40px #000000;
		content: " ";
		display: block;
		height: 0px;
		position: absolute;
		width: 100%;
	}
    .textTitleTravel {
        position: relative;
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        z-index: 10;
        padding: 20px;
    }
    .listThumbTravel img {
        width: 138px;
        height: 69px;
        overflow: hidden;
        margin-bottom: 5px;
    }
    .listThumbTravel {
        font: normal 0.6875em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        height: 145px;
        overflow: hidden;
        padding: 20px 0 0 5px;
    }
    .listThumbTravel a:hover {
        text-decoration: underline;
    }
    .listThumbTravel:hover > img {
        border: solid 5px #01837e;
        width: 128px;
        height: 59px;
    }
    .listThumbTravel:hover > img {
        border: solid 5px #01837e;
        width: 128px;
        height: 59px;
    }
    .listThumbTravel a:active > img {
        border: solid 5px #01837e;
        width: 128px;
        height: 59px;
    }
    .listThumbTravel a.current > img {
        border: solid 5px #01837e;
        width: 128px;
        height: 59px;
    }
    /* Properti ============================================== */
    .bigBoxProperti {
        width: 298px;
        height: 292px;
        position: relative;
        overflow:hidden;
    }
    .imgBoxProperti img {
        width: 570px;
        height: 292px;
        overflow: hidden;
        position: absolute;
        z-index: 0;
        right:-180px;
    }
    .tagProperti {
        font: bold 1.125em Arial, Helvetica, sans-serif;
        color: #fff;
        background: #745b24;
        position: absolute;
        z-index: 1;
        padding: 5px 10px;
    }
    .titleProperti {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: relative;
        z-index: 3;
        width: 260px;
        margin: 0 auto;
        padding: 10px 0;
    }
    .titleProperti a {
        font: normal 0.9375em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
        display: block;
        max-height: 45px;
        overflow: hidden;
    }
    .titleProperti a:hover {
        text-decoration: underline;
    }
    .boxOutProperti {
        position: absolute;
        z-index: 1;
        height: auto;
        width: 100%;
        bottom: 0;
        padding: 0px 0;
    }
    .boxTitleProperti {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 40px;
		opacity:0.8;
    }
	.boxTitleProperti:after {
		bottom: 0;
		box-shadow: 0 0 40px 40px #000000;
		content: " ";
		display: block;
		height: 0px;
		position: absolute;
		width: 100%;
	}
    .listProperti ul {
        margin: 0;
        padding: 5px 0 0px 0px;
    }
    .listProperti ul li {
        background: url(http://assets.kompas.com/data/2013/news/images/artikel/arrow-ter.gif) left -7px no-repeat;
        list-style-type: none;
        margin: 0;
        padding: 5px 0 5px 15px;
    }
    .listProperti ul li a {
        font: normal 0.85em/1.4em "opensanssemibold","Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        max-height: 40px;
        overflow: hidden;
        display: inline-block;
    }
    .listProperti ul li a:hover {
        text-decoration: underline;
    }
    /* kanal buttom ============================ */
    .kanalBottomIn {
        width: 1090px;
        margin: 0 auto;
        padding: 0 0 0 40px;
    }
    .buttomMenuKanal {
        padding-right: 20px;
        padding-top: 20px;
    }
    .buttomMenuKanal h1 {
        font: bold 16px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0 0 15px 0;
        padding: 5px 0 5px 0;
        border-bottom: solid 1px #ccc;
        width: 95%;
    }
    .buttomMenuKanal ul {
        margin: 0;
        padding: 0;
    }
    .buttomMenuKanal ul li {
        list-style-type: none;
        display:inline-block;
        padding: 2px 14px;
    }
    .buttomMenuKanal ul li:first-child {
        padding-left:0;
    }
    .buttomMenuKanal ul li a {
        font: normal 12px "OpensansSemibold", "Lucida Grande", Arial, Helvetica, sans-serif;
        color: #666;
        text-decoration: none;
        display:inline-block;
    }
    .buttomMenuKanal ul li a:hover {
        text-decoration: underline;
    }
    /* Networks buttom ============================ */
    .buttomMenuNetworks {
        float: left;
        padding-left: 20px;
    }
    .buttomMenuNetworks h1 {
        font: bold 16px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0 0 15px 0;
        padding: 0 0 0px 0;
        border-bottom: solid 1px #ccc;
        width: 445px;
    }
    .buttomMenuNetworks ul {
        margin: 0;
        padding: 0;
        width: 500px;
    }
    .buttomMenuNetworks ul li {
        list-style-type: none;
        float: left;
        width: 120px;
        padding: 2px 0;
    }
    .buttomMenuNetworks ul li a {
        font: normal 12px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #666;
        text-decoration: none;
    }
    .buttomMenuNetworks ul li a:hover {
        text-decoration: underline;
    }
    /* border bottom ======================================== */
    .borderBottom {
        float: left;
        height: 100px;
        border-left: solid 1px #e0e0e0;
        display: none;
    }
    /* footer menu ========================================= */
    h1#footerMenu2 a {
        color: #000;
    }
    .footerMenu ul {
        margin: 0;
        padding: 5px 0;
    }
    .footerMenu ul li {
        list-style-type: none;
        display: inline-block;
        border-right: solid 1px #ccc;
        padding: 0 10px;
    }
    .footerMenu ul li:last-child {
        border-right: none;
    }
    .footerMenu ul li:first-child {
        padding-left: 0;
    }
    .footerMenu ul li a {
        font: normal 0.75em "OpenSansSemibold", "Lucida Grande", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
    }
    .footerMenu ul li a:hover {
        text-decoration: underline;
    }
    .footerMenu h6 {
        font: normal 0.75em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0;
        padding: 0;
    }
    .socialMedia {
        padding: 20px 0;
        float: left;
    }
    .socialMedia ul {
        margin: 0;
        padding: 0;
    }
    .socialMedia ul li {
        list-style-type: none;
        display: inline;
    }
    .socialMedia ul li a#rssfeed {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared2.jpg) no-repeat 0px 0px;
    }
    .socialMedia ul li a#facebookSoc {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared2.jpg) no-repeat -30px 0px;
    }

    .socialMedia ul li a#instagramSoc {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared2.jpg) no-repeat -60px 0px;
    }
    .socialMedia ul li a#linkedinSoc {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared2.jpg) no-repeat -90px 0px;
    }
    .socialMedia ul li a#twitterSoc {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared2.jpg) no-repeat -120px 0px;
    }
    .socialMedia ul li a#youtubeSoc {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared2.jpg) no-repeat -150px 0px;
    }
    .socialMedia ul li a#googleplus {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared2.jpg) no-repeat -180px 0px;
    }
    .socialMedia ul li a#pinterestSoc {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared2.jpg) no-repeat -210px 0px;
    }
    .socialMedia ul li a#rssfeed:hover {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared.jpg) no-repeat 0px 0px;
    }
    .socialMedia ul li a#facebookSoc:hover {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared.jpg) no-repeat -30px 0px;
    }
    .socialMedia ul li a#instagramSoc:hover {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared.jpg) no-repeat -60px 0px;
    }
    .socialMedia ul li a#linkedinSoc:hover {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared.jpg) no-repeat -90px 0px;
    }
    .socialMedia ul li a#twitterSoc:hover {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared.jpg) no-repeat -120px 0px;
    }
    .socialMedia ul li a#youtubeSoc:hover {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared.jpg) no-repeat -150px 0px;
    }
    .socialMedia ul li a#googleplus:hover {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared.jpg) no-repeat -180px 0px;
    }
    .socialMedia ul li a#pinterestSoc:hover {
        height: 30px;
        width: 30px;
        display: inline-block;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/socialShared.jpg) no-repeat -210px 0px;
    }
    /* E : WELCOME PAGE ================================================================================================================= */
    /* S : RUBRIK ================================================================================================================= */
    /* TOP RUBRIK =============== */
    .titleRubrik {
        width: 550px;
        height: 80px;
        text-align: center;
        margin: 0 auto;
        float: left;
    }
    .titleRubrik h1 {
        margin: 0;
        padding: 0;
        font: normal 50px/58px "OpenSansExtrabold", Arial, Helvetica, sans-serif;
        color: #000;
        letter-spacing: -3px;
    }
    .titleRubrik h6 {
        margin: 0;
        padding: 0;
        font: normal 0.75em "Lucida Grande","Lucida Sans Unicode", sans-serif Arial, Helvetica, sans-serif;
        color: #999;
        margin: 0;
        padding: 0px 0;
    }
    .smallLogoKompas {
        width: 230px;
        height: auto;
    }
    .smallLogoKompas a img {
        margin: 0 0 0 -12px;
    }
    ul#submenuKompascom {
        margin: 0;
        padding: 5px 0 5px 0px;
    }
    ul#submenuKompascom li {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: inline-block;
    }
    ul#submenuKompascom li a {
        font: normal 12px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #00528a;
        text-decoration: none;
        display: inline-block;
        padding: 0px 10px;
    }
    ul#submenuKompascom li a:hover {
        font: normal 12px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #e74f1d;
        text-decoration: none;
        display: inline-block;
        padding: 0px 10px;
    }
    ul#submenuKompascom li a.selected {
        font: normal 12px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #e74f1d;
        text-decoration: none;
        display: inline-block;
        padding: 0px 10px;
    }
    .outSubMenu {
        border-bottom: solid 1px #eaeaea;
        width: 1100px;
        margin: 0 auto;
    }
    /* HEADLINE RUBRIK ================ */
    .boxHLTrending {
        float: left;
        width: 780px;
    }
    .HLrubrik {
        width: 480px;
        height: 240px;
        float: left;
        position: relative;
        overflow: hidden;
    }
    .HLrubrik:after {
        content:"\0020";
        display: block;
        position: absolute;
        width: 100%;
        height: 1px;
        /* when 0 no shadow is displayed*/
        -webkit-box-shadow: 0 0 70px 80px rgba(0, 0, 0, 0.7);
        box-shadow: 0 0 70px 80px rgba(0, 0, 0, 0.7);
        bottom: 0;
    }
    .HLrubrik img {
        width: 480px;
        height: 240px;
        overflow: hidden;
    }
    .TrendingRubrik {
        width: 280px;
        height: 240px;
        float: left;
        overflow: hidden;
        padding-left: 20px;
    }
    .HLTitleRubrik {
        position: absolute;
        bottom: 0;
        padding: 10px 20px;
        z-index: 1;
    }
    .HLTitleRubrik h1 {
        margin: 0;
        padding: 0 5px;
        font: normal 0.875em "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        background: #f00;
        display: inline-block;
        bottom: 0;
    }
    a#titleRubrikIn {
        font: normal 18px/24px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
        text-align: left;
        width: 440px;
        display: block;
        max-height: 50px;
        overflow: hidden;
        padding-top: 5px;
    }
    a#titleRubrikIn:hover {
        text-decoration: underline;
    }
    a#readMoreRubrik {
        font: normal 14px/24px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
        text-align: left;
        width: 460px;
        padding: 5px 0;
        display: none;
    }
    a#readMoreRubrik:hover {
        text-decoration: underline;
    }
    /* TRENDING RUBRIK =================== */
    .TrendingRubrik h1 {
        margin: 0;
        padding: 0;
        font: normal 16px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
    }
    .TrendingRubrik ul {
        margin: 0;
        padding: 0;
    }
    .TrendingRubrik ul li {
        list-style-type: none;
        border-bottom: dotted 1px #e5e5e5;
        padding: 6px 0;
        position: relative;
        height: 41px;
    }
    .TrendingRubrik ul li span.noTrendingRubrik {
        font: normal 30px "OpenSansExtraboldItalic", Arial, Helvetica, sans-serif;
        color: #fec287;
        display: inline-block;
        width: 30px;
        float: left;
    }
    .TrendingRubrik ul li span.anchorTrending a {
        text-decoration: none;
        font: normal 14px/20px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        display: table-cell;
        width: 250px;
        overflow: hidden;
        height: 40px;
        vertical-align: middle;
    }
    .TrendingRubrik ul li span.anchorTrending a:hover {
        text-decoration: underline;
    }
    /* LIST ALL RUBRIK ================ */
    .listAllRubrik {
        padding-top: 0px;
    }
    .colTopLeftAllRubrik {
        float: left;
        padding: 20px 0 020px 0;
    }
    .colTopLeftAllRubrik h1 {
        float: left;
        margin: 0;
        padding: 0;
        font: normal 18px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
    }
    .colTopLeftAllRubrik h6 {
        float: left;
        margin: 0;
        padding: 5px 0 0 10px;
        font: normal 11px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #ccc;
    }
    ul.tabsRubrik {
        margin: 0;
        padding: 0;
        background: #f5f5f5;
        border: solid 1px #ccc;
        border-radius: 3px;
    }
    ul.tabsRubrik li {
        list-style-type: none;
        display: inline;
        margin: 0;
        padding: 0;
    }
    .tabAllRubrik {
        float: right;
        margin-top: 20px;
    }
    ul.tabsRubrik li a.tabList {
        float: left;
        border-right: solid 0px #ccc;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/tabList.png) no-repeat right;
    }
    .tabList, .tabGrid {
        cursor: pointer;
    }
    ul.tabsRubrik li a.tabList, ul.tabsRubrik li a.tabGrid {
        font: normal 10px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #000;
        display: inline-block;
        text-decoration: none;
        padding: 2px 10px;
        text-align: left;
        width: 40px;
    }
    .tabList:hover, .tabGrid:hover {
        background: #ddd;
        opacity: 0.6;
        -webkit-box-shadow: inset 0px 00px 10px 0px;
        box-shadow: inset 0px 00px 10px 0px;
    }
    ul.tabsRubrik li#tabsL a:active {
        background: #ddd;
        opacity: 0.6;
        -webkit-box-shadow: inset 0px 00px 10px 0px;
        box-shadow: inset 0px 00px 10px 0px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/tabList.png) no-repeat right;
    }
    ul.tabsRubrik li#tabsRL a.current {
        background: #ddd;
        opacity: 0.6;
        -webkit-box-shadow: inset 0px 00px 10px 0px;
        box-shadow: inset 0px 00px 10px 0px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/tabList.png) no-repeat right;
    }
    ul.tabsRubrik li#tabsRG a:active {
        background: #ddd;
        opacity: 0.6;
        -webkit-box-shadow: inset 0px 00px 10px 0px;
        box-shadow: inset 0px 00px 10px 0px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/tabGrid.png) no-repeat right;
    }
    ul.tabsRubrik li#tabsRG a.current {
        background: #ddd;
        opacity: 0.6;
        -webkit-box-shadow: inset 0px 00px 10px 0px;
        box-shadow: inset 0px 00px 10px 0px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/tabGrid.png) no-repeat right;
    }
    ul.tabsRubrik li a.tabGrid {
        float: left;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/tabGrid.png) no-repeat right;
    }
    /* start revisi 16 april */
    .boxThumbRubrik {
        width: 236px;
        height: 236px;
        border: solid 1px #ccc;
        position: relative;
        float: left;
        margin-bottom: 20px;
    }
    .boxThumbRubrikImg {
        width: 226px;
        height: 226px;
        position: relative;
        overflow:hidden;
        border: solid 5px #fff;
    }
    .boxThumbRubrikImg img {
        width: auto;
        height: 236px;
        position: absolute;
        left:-100px;
    }
    /* start revisi 16 april */
    .pLRThumb {
        margin: 0 32px;
    }
    h1.tagAllRubrik {
        position: absolute;
        color: #fff;
        font: normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        padding: 2px 5px;
        top: 5px;
        left: 5px;
        margin: 0;
    }
    h1.tagRubrik {
        background: #bf0000;
    }
    .boxTitleAllRubrik {
        bottom: 0;
        position: absolute;
        background: rgba(0, 0, 0, 0.6);
        width: 226px;
        margin: 0 0 5px 5px;
        padding-bottom: 10px;
    }
    .boxTitleAllRubrik a {
        font: normal 14px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
        display: block;
        width: 196px;
        margin-left: 5px;
        margin-bottom: 5px;
        padding: 10px 15px 20px 15px;
        max-height: 22px;
        overflow: hidden;
    }
    .boxTitleAllRubrik a:hover {
        text-decoration: underline;
    }
    .boxTitleAllRubrik2 a {
        font: normal 22px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        display: block;
        max-height: 90px;
        overflow: hidden;
        width: 200px;
        margin: 0 auto;
        padding-top: 40px;
    }
    .boxTitleAllRubrik2 a:hover {
        text-decoration: underline;
    }
    .boxTitleAllRubrik2 p {
        font: normal 14px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        width: 200px;
        margin: 0 auto;
        padding-top: 10px;
        overflow: hidden;
        max-height: 70px;
    }
    /* TERPOPULER & TERKOMENTARI RUBRIK ====================== */
    .terbaruTerkomentari-artikel {
        width: 300px;
        height: 400px;
        background: #fff;
        margin: 20px 0 0 0px;
        float: right;
        overflow: hidden;
    }
    .imgterbaruTerkomentari {
        float: left;
        width: 55px;
        height: 55px;
        overflow: hidden;
    }
    .imgterbaruTerkomentari img {
        width: 55px;
        height: 55px;
        overflow: hidden;
    }
    .listTerbarkom-artikel {
        border-bottom: dotted 0px #dadada;
        padding: 9px 0;
    }
    .titleTerbakom-artikel {
        float: left;
        padding-left: 10px;
        height: 36px;
        overflow: hidden;
        width: 210px;
    }
    .titleTerbakom-artikel a {
        font: normal 0.75em/16px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        display: inline-block;
        overflow: hidden;
    }
    .titleTerbakom-artikel a:hover {
        text-decoration: underline;
    }
    .KatTitle-artikel {
        font: normal 0.625em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #ff9900;
        padding-left: 10px;
        float: left;
        max-width: 220px;
    }
    .tabTerbaru {
        padding: 0 10px;
    }
    .tabTerkomentari {
        padding: 0 10px;
    }
    /**** Color Kategori ************/
    .ent-col {
        color: #3399ff;
    }
    .ent-col a, h6.ent-col {
        color: #3399ff;
        text-decoration: none;
    }
    .ent-col a:hover {
        color: #3399ff;
        text-decoration: none;
    }
    .tek-col {
        color: #ff6600;
    }
    .tek-col a, h6.tek-col {
        color: #ff6600;
        text-decoration: none;
    }
    .tek-col a:hover {
        color: #ff6600;
        text-decoration: none;
    }
    .oto-col {
        color: #e60000;
    }
    .oto-col a, h6.oto-col {
        color: #e60000;
        text-decoration: none;
    }
    .oto-col a:hover {
        color: #e60000;
        text-decoration: none;
    }
    .bol-col {
        color: #69c002;
    }
    .bol-col a, h6.bol-col {
        color: #69c002;
        text-decoration: none;
    }
    .bol-col a:hover {
        color: #69c002;
        text-decoration: none;
    }
    .fem-col {
        color: #ff0066;
    }
    .fem-col a, h6.fem-col {
        color: #ff0066;
        text-decoration: none;
    }
    .fem-col a:hover {
        color: #ff0066;
        text-decoration: none;
    }
    .eko-col {
        color: #006600;
    }
    .eko-col a, h6.eko-col {
        color: #006600;
        text-decoration: none;
    }
    .eko-col a:hover {
        color: #006600;
        text-decoration: none;
    }
    .hea-col {
        color: #01df20;
    }
    .hea-col a, h6.hea-col {
        color: #01df20;
        text-decoration: none;
    }
    .hea-col a:hover {
        color: #01df20;
        text-decoration: none;
    }
    .tra-col {
        color: #00a8a2;
    }
    .tra-col a, h6.tra-col {
        color: #00a8a2;
        text-decoration: none;
    }
    .tra-col a:hover {
        color: #00a8a2;
        text-decoration: none;
    }
    .pro-col {
        color: #745b24;
    }
    .pro-col a, h6.pro-col {
        color: #745b24;
        text-decoration: none;
    }
    .pro-col a:hover {
        color: #745b24;
        text-decoration: none;
    }
    /**** end Color Kategori ************/
    /* MORE RUBRIK ================= */
    .moreRubrik {
        width: 776px;
        height: 29px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/bgMoreRubrik.jpg) bottom repeat-x;
        border: solid 1px #e5e5e5;
        border-radius: 3px;
        text-align: center;
    }
    .moreRubrik span {
        float: left;
    }
    .moreRubrikIn {
        width: 120px;
        background: red;
        margin: 0 auto;
    }
    span.klikMore a {
        padding-top: 5px;
        font: normal 14px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        display: inline-block;
        text-decoration: none;
        color: #000;
    }
    span.arrowMoreRubrik {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/arrowMoreRubrik.jpg) no-repeat center;
        width: 12px;
        height: 29px;
        padding-left: 20px;
        cursor: pointer;
    }
    /* LIST RUBRIK ========================================= */
    .listRubrik {
        border-bottom: dotted 1px #d8d8d8;
        padding: 20px 0;
    }
    /* revisi 16 april */
    .imgListRubrik {
        width: 100px;
        height: 100px;
        overflow: hidden;
        float: left;
        position:relative;
    }
    .imgListRubrik img {
        width: auto;
        height: 100px;
        position:absolute;
        left:-50px;
    }
    /* e revisi 16 april */
    .rightListRubrik {
        padding-left: 20px;
        width: 660px;
        float: left;
    }
    .rightListRubrik h6 {
        margin: 0;
        padding: 0;
        font: normal 12px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #cc0000;
    }
    .rightListRubrik2 {
        width: 770px;
        float: left;
    }
    .rightListRubrik2 h6 {
        margin: 0;
        padding: 0;
        font: normal 12px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #cc0000;
    }
    .rightListRubrik2 h5 {
        margin: 0;
        padding: 5px 0 0 0;
        font: normal 10px/14px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #ccc;
    }
    .rightListRubrik2 a {
        margin: 0;
        padding: 5px 0;
        font: normal 18px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        display: block;
        height: 20px;
        overflow: hidden;
    }
    .rightListRubrik2 a:hover {
        text-decoration:underline;
    }
    .rightListRubrik2 p {
        margin: 0;
        padding: 5px 0 0 0;
        font: normal 14px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        overflow: hidden;
        max-height: 44px;
    }
    .rightListRubrik a {
        margin: 0;
        padding: 5px 0;
        font: normal 18px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        display: block;
        height: 20px;
        overflow: hidden;
    }
    .rightListRubrik p {
        margin: 0;
        padding: 5px 0 0 0;
        font: normal 14px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        overflow: hidden;
        max-height: 44px;
    }
    .rightListRubrik a:hover {
        text-decoration: underline;
    }
    .nasList {
        color: #bf0000;
    }
    .olgList {
        color: #006600;
    }
    .saiList {
        color: #9933ff;
    }
    .tekList {
        color: #ff6600;
    }
    .femList {
        color: #ff0066;
    }
    .helList {
        color: #00cc33;
    }
    /* E : RUBRIK ================================================================================================================= */
    /* S : SUBRUBRIK ================================================================================================================= */
    .bannerCenter1SubRubrik {
        width: 468px;
        height: 60px;
        background: grey;
        margin: 20px auto 0 auto;
    }
    .bannerCenter2SubRubrik {
        width: 468px;
        height: 60px;
        background: grey;
        margin: 20px auto 0 auto;
    }
    .listIndexBerita {
        background: #e7e7e7;
        width: 770px;
        height: 35px;
        display: block;
        margin-top: 10px;
    }
    .textListIndexBerita {
        padding-left: 10px;
        display: block;
        font-weight: 600;
    }
    .textIndexSelect {
        font: normal 12px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
    }
    .tombolTampilkan {
        font: normal 12px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        border: none;
        margin-top: 8px;
        background: #666;
        border-radius: 3px;
        -webkit-border-radius: 3px;
    }
    .listSubRubrik ul {
        padding: 0px;
        list-style: none;
    }
    .listSubRubrik li {
        padding: 25px 0px 40px 0px;
        border-bottom: solid 1px #d1d1d1;
        width: 730px;
    }
    /* s : revisi 16 april */
    .listSubRubrik ul li .imgSubRubrik {
        float: left;
        width: 100px;
        height: 100px;
        padding-right: 20px;
        position:relative;
        overflow:hidden;
    }
    .imgSubRubrik img {
        width:auto;
        height:100px;
        position:absolute;
        left:-100px;
        float:left;
    }
    /* e : revisi 16 april */
    .listSubRubrik ul li .imgSubRubrik2 img {
        float: left;
        width: 300px;
        height: 150px;
        padding-right: 20px;
    }
    .boxSubRubrik {
        width: 610px;
        float: left;
    }
    .boxSubRubrik2 {
        width: 400px;
        float: left;
    }
    .listBreak {
        border: none;
    }
    .judulListSubRubrik a {
        font: normal 18px/20px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        font-weight: 600;
        color: #000;
        text-decoration: none;
    }
    .judulListSubRubrik a:hover {
        text-decoration: underline;
    }
    .tanggalListSubRubrik {
        font: normal 11px/20px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #999;
        margin: 3px 0px;
    }
    .editorSubRubrik {
        font: normal 11px/20px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #999;
        float: left;
        padding-right: 20px;
    }
    .totalKomentarRubrik {
        float: left;
    }
    .totalKomentarRubrik img {
        width: 12px;
        height: 12px;
        overflow: hidden;
    }
    .tambahKomentarRubrik {
        float: left;
        padding-left: 20px;
    }
    .tambahKomentarRubrik a {
        text-decoration: none;
        color: #999;
    }
    .tambahKomentarRubrik a span {
        color: #ff9900;
        padding-right: 4px;
    }
    .isiListSubRubrik {
        font: normal 14px/20px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
    }
    .paginationSubRubrik {
        margin: 0 auto;
        width: 550px;
    }
    .paginationSubRubrik ul {
        margin: 0;
        padding: 0;
    }
    .paginationSubRubrik ul li {
        list-style-type: none;
        display: inline-block;
        height: auto;
        padding-top: 5px;
        padding-right: 5px;
        padding-left: 0px;
    }
    .paginationSubRubrik ul li.pageHover a {
        color: #000;
    }
    .paginationSubRubrik ul li.pageHover a:hover {
        background: #e74f1d;
        color: #fff;
        border-radius: 3px;
    }
    .paginationSubRubrik ul li.pageHover a.active {
        background: #e74f1d;
        color: #fff;
        border-radius: 3px;
    }
    .paginationSubRubrik ul li a {
        text-decoration: none;
        font: normal 20px "OpenSansSemibold", arial;
        display: inline-block;
        padding: 2px 10px;
    }
    .paginationSubRubrik ul li#prevBG {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/prevPage.jpg) top left no-repeat;
        display: inline-block;
        height: 70px;
        width: auto;
    }
    .paginationSubRubrik ul li#nextBG {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/nextPage.jpg) top right no-repeat;
        display: inline-block;
        height: auto;
        width: 100px;
        padding-left: 40px;
    }
    .paginationSubRubrik ul li a.prevText {
        color: #999;
        padding: 0 40px;
        display: block;
    }
    .paginationSubRubrik ul li a.prevText:hover {
        color: #e1541c;
    }
    .paginationSubRubrik ul li a.nextText:hover {
        color: #e1541c;
    }
    .paginationSubRubrik ul li a.nextText {
        color: #999;
    }
    /* E : SUBRUBRIK ================================================================================================================= */
    /* S : ARTIKEL DETAIL ========================================================================================================== */
    /* artikel */
    .artikel-atas {
    }
    .artikel-detail {
        width: 740px;
        float: left;
        padding: 20px 20px 0 0px;
        position: relative;
    }
    .artikel-detail-alt2 {
        width: 760px;
        float: left;
        padding: 20px 20px 0 0px;
        position: relative;
    }
    .artikel-detail p {
        font: normal 16px/26px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #333;
        padding: 0px 0 30px;
        margin: 0;
    }
    .artikel-detail p a {
        font: normal 16px/26px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #3399ff;
        text-decoration:none;
    }
    .artikel-detail p a:hover {
        text-decoration:underline;
    }
    .artikel-detail-alt2 {
        font: normal 16px/26px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #333;
        
    }
    .artikel-detail-alt2 p {
        font: normal 16px/26px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #333;
        padding: 15px 0;
        margin: 0;
    }
    .artikel-detail-alt2 p a {
        font: normal 16px/26px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #3399ff;
        text-decoration:none;
    }
    .artikel-detail-alt2 p a:hover {
        text-decoration:underline;
    }
    .ml-p-right {
        border: 1px solid #e3e3e3;
        position: relative;
        padding: 0.8%;
        margin: 15px 0px 15px 15px;
        float: right;
    }
    .ml-p-left {
        position: relative;
        margin: 15px 15px 15px 0;
        float: left;
        width:200px;
    }
    .ml-p-left img {
        width:98.4%;
        border: 1px solid #e3e3e3;
        padding: 0.8%;
        float:left;
        margin-bottom:10px;
    }
    .artikel-detail h1 {
        font: normal 2em/1.2em "OpenSansBold", arial;
        color: #000;
        letter-spacing: -1px;
        margin: 0 0 10px 0px;
    }
    .artikel-detail-alt2 h1 {
        font: normal 2em/1.2em "OpenSansBold", arial;
        color: #000;
        letter-spacing: -1px;
        margin: 0 0 10px 0px;
    }
    .artikel-detail-penulis {
        position: relative;
    }
    .cl-silver {
        color: #30a3dc;
    }
    .artikel-detail-penulis ul {
        list-style: none;
        color: #999;
        margin: 0px 0 10px;
        padding: 0;
        font-size: 12px;
        width: 60%;
        float: left;
    }
    .artikel-detail-penulis li {
        float: left;
        padding: 0 10px;
        border-right: 1px solid #e7e7e7;
    }
    .artikel-detail-penulis li:first-child {
        float: left;
        padding: 0 5px 0 0px;
        border-right: 1px solid #e7e7e7;
    }
    /****** Quotes ********/
    .quotes {
        width: 300px;
        padding: 20px;
        font: bold 1.5em/1.25em "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #ff7800;
        margin:0 auto;
    }
    .quotes3 {
        width: 200px;
        font: bold 1.2em/1.2em "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #ff7800;
        margin:0 auto;
    }
    .left-alt3 {
        width:200px;
        float:left;
        padding:5px 20px 20px 0px;
    }
    /****** Editor dan sumber ******/
    .editor-artikel {
        float: left;
        font: normal 0.750em "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #999999;
        margin:0 0 20px;
    }
    .sumber-artikel {
        float: right;
        font: normal 0.750em "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #999999;
    }
    /****** Next artikel ********/
    .next-artikel {
        margin:0px 0 20px;
    }
    .next-artikel ul {
        list-style: none;
        margin: 0px auto;
        padding: 0;
        width:54%;
    }
    .next-artikel li {
        float: left;
        font: normal 0.850em "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #000;
        margin: 10px 0 10px;
    }
    .next-artikel a {
        color: #999;
        text-decoration: none;
    }
    .next-artikel a:hover {
        color: #000;
        text-decoration: none;
    }
    .next-active {
        color: #f60;
        text-decoration: none;
        font-weight:bold;
    }
    .next-artikel li:first-child {
        float: left;
        list-style: none;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/prev-arrow.gif) left no-repeat;
        padding-left: 20px;
        padding-top: 0px;
        padding-right:20px;
        margin-right:30px;
        border-right:1px solid #ccc;
    }
    .next-artikel li:last-child {
        float: left;
        list-style: none;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/next-arrow.gif) right no-repeat;
        padding-right: 20px;
        padding-left: 20px;
        margin-left:30px;
        border-left:1px solid #ccc;
    }
    /************************** Breadcrum *******************************/
    #breadcrumb {
        height: 15px;
        margin-bottom: 5px;
    }
    #breadcrumb ul {
        list-style: none;
        color: #999999;
        padding: 0;
        margin: 0;
        font: normal 12px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        letter-spacing: 0.06em;
    }
    #breadcrumb li {
        float: left;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/arrow-bread.gif) right center no-repeat;
        padding-right: 10px;
    }
    #breadcrumb li:last-child {
        float: left;
        background: none;
        padding-right: 15px;
    }
    #breadcrumb a {
        display: block;
        padding: 0px 5px;
        font: normal 12px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #999999;
        text-decoration: none;
    }
    #breadcrumb a:hover {
        color: #ff9600;
    }
    a#breadcrumb.bread.active {
        color: #ff9900;
    }
    .terbaruTerkomentari-artikel {
        width: 300px;
        height: 400px;
        background: #fff;
        margin: 20px 0 0 0px;
        float: right;
        overflow: hidden;
    }
    /* s : 16 april */
    .imgterbaruTerkomentari {
        float: left;
        width: 55px;
        height: 55px;
        overflow: hidden;
        position:relative;
    }
    .imgterbaruTerkomentari img {
        width: auto;
        height: 55px;
        position:absolute;
    }
    /* e : revisi 16 april */
    .listTerbarkom-artikel {
        border-bottom: dotted 0px #dadada;
        padding: 9px 0;
    }
    .titleTerbakom-artikel {
        float: left;
        padding-left: 10px;
        height: 36px;
        overflow: hidden;
        width: 210px;
    }
    .titleTerbakom-artikel a {
        font: normal 0.75em/16px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        display: inline-block;
        overflow: hidden;
    }
    .titleTerbakom-artikel a:hover {
        text-decoration: underline;
    }
    .KatTitle-artikel {
        font: normal 0.625em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #ff9900;
        padding-left: 10px;
        float: left;
        max-width: 220px;
    }
    .tabTerbaru {
        padding: 0 10px;
    }
    .tabTerkomentari {
        padding: 0 10px;
    }
    /* You May Like */
    .YouMayLike {
        width: 47%;
        height: 260px;
        background: #fff;
        margin: 20px 0 0 35px;
        float: right;
        overflow: hidden;
    }
    .ml-40 {
        margin-left: 40px;
    }
    .listYouMayLike {
        border-bottom: dotted 1px #cbcbcb;
        padding: 10px 0;
    }
    .imgYouMayLike {
        float: left;
        width: 55px;
        height: 55px;
        overflow: hidden;
    }
    .imgYouMayLike img {
        width: 55px;
        height: 55px;
        overflow: hidden;
    }
    .titleBoxYouMayLike {
        width: 80%;
        height: 45px;
        float: left;
        margin-left: 3%;
    }
    .YouMayLike h1 {
        font: normal 1em "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0 0 10px 0;
        padding: 0px 0 3px 0;
        border-bottom: 2px solid #000;
    }
    .titleBoxYouMayLike h6 {
        margin: 0;
        padding: 0;
        font: normal 0.625em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #f09003;
    }
    span.titleYouMayLike a {
        text-decoration: none;
        font: normal 0.928em/22px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        display: inline-block;
        min-width: 260px;
        max-width: 265px;
        max-height: 45px;
        overflow: hidden;
    }
    span.titleYouMayLike a:hover {
        text-decoration: underline;
    }
    .viewYouMayLike {
        font: normal 0.625em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #f09003;
    }
    .topik-ini {
        font:bold 1em/1.5em "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#000;
        margin:0px 0 20px;
        width:60%;
        float:left;
    }
    .topik-ini a {
        font:normal 1em/1.5em "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#3399ff;
        text-decoration:none;
    }
    .topik-ini a:hover {
        text-decoration:underline;
    }
    .terkait {
        width: 47%;
        height: 260px;
        margin: 20px 0 0 0px;
        overflow: hidden;
        float:left;
    }
    .terkait ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .terkait li {
        border-bottom: dotted 1px #cbcbcb;
        padding: 10px 0 5px 0;
        font: normal 14px/24px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/arrow-ter.gif) top left no-repeat;
        padding-left: 15px;
        height: 21px;
        overflow: hidden;
    }
    .terkait li a {
        font: normal 14px/24px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
    }
    .terkait li a:hover {
        text-decoration: underline;
    }
    .terkait li:last-child {
        border-bottom: 0px solid #ccc;
    }
    .terkait h1 {
        font: normal 1em "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0 0 10px 0;
        padding: 0px 0 3px 0;
        border-bottom: 2px solid #000;
    }
    .ikuti-topik {
        width: 45%;
        height: 250px;
        margin: 20px 0 0 0px;
        overflow: hidden;
        float:right;
        background: #f4f4f4;
        border:1px solid #e4e4e4;
        padding:10px 20px;
        text-shadow: 1px 1px 1px #ffffff;
    }
    .ikuti-topik ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .ikuti-topik li {
        border-bottom: dotted 1px #cbcbcb;
        padding: 10px 0 5px 0;
        font: normal 14px/24px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/arrow-ter.gif) top left no-repeat;
        padding-left: 15px;
        height: 21px;
        overflow: hidden;
    }
    .ikuti-topik li a {
        font: normal 14px/24px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
    }
    .ikuti-topik li a:hover {
        text-decoration: underline;
    }
    .ikuti-topik li:last-child {
        border-bottom: 0px solid #ccc;
    }
    .ikuti-topik h1 {
        font: normal 1em "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0 0 0px 0;
        padding: 0px 0 3px 0;
    }
    /* trending */
    .trending-artikel {
        width: 300px;
        height: auto;
        overflow: hidden;
        float: right;
        margin-top: 20px;
        padding-bottom:5px;
        border-bottom:5px solid #e5e5e5;
    }
    .trending-artikel h1 {
        font: normal 1em "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px 0 5px;
        border-bottom:3px solid #66c1d4;
        padding-bottom:8px;
    }
    .trending-artikel ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .trending-artikel li {
        padding: 10px 0;
        font: normal 0.850em/1.5em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        border-bottom: dotted 1px #cbcbcb;
    }
    .trending-artikel li:last-child {
        padding: 10px 0;
        font: normal 0.850em/1.5em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        border-bottom: dotted 0px #cbcbcb;
    }
    .trending-number {
        width: 40px;
        height: 40px;
        font: normal 3em/1em "OpenSansBoldItalic", "Lucida Grande", Arial, Helvetica, sans-serif;
        color: #fec287;
        float: left;
    }
    .trending-kat {
        width: 255px;
        float: left;
    }
    .trending-title {
        width: 255px;
        height: auto;
        overflow: hidden;
        float: left;
    }
    .trending-title a {
        width: 255px;
        float: left;
        text-decoration: none;
        color: #000;
    }
    .trending-title a:hover {
        text-decoration: underline;
    }
    .terbaru-kat {
        width: 70%;
        float: left;
        margin-left:10px;
    }
    .terbaru-title {
        width: 70%;
        height: auto;
        overflow: hidden;
        float: left;
        margin-left:10px;
    }
    .terbaru-title a {
        width: 100%;
        float: left;
        text-decoration: none;
        color: #000;
    }
    .terbaru-title a:hover {
        text-decoration: underline;
    }
    .bottomBox-kat {
        width: 95%;
        float: left;
    }
    .bottomBox-title {
        width: 95%;
        height: auto;
        overflow: hidden;
        float: left;
    }
    .bottomBox-title a {
        width: 100%;
        float: left;
        text-decoration: none;
        color: #000;
    }
    .bottomBox-title a:hover {
        text-decoration: underline;
    }
    .box-after-r1 {
        width: 300px;
        height: auto;
        overflow: hidden;
        float: right;
        margin-top: 20px;
        padding-bottom:5px;
        border-bottom:5px solid #e5e5e5;
    }
    .box-after-r1 h1 {
        font: normal 1em "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px 0 5px;
        width:100%;
        border-bottom:3px solid #f33e07;
        padding-bottom:8px;
    }
    .box-after-r1 ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .box-after-r1 li {
        padding: 10px 0;
        font: normal 0.850em/1.5em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        border-bottom: dotted 1px #cbcbcb;
    }
    .box-after-r1 li:last-child {
        padding: 10px 0;
        font: normal 0.850em/1.5em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        border-bottom: dotted 0px #cbcbcb;
    }
    /*   e : terbaru          */
    .komentar-lay {
        width: 100%;
        float: left;
        padding-right: 20px;
    }
    .w_760 {
        width: 100%;
    }
    .social-newsletter-images {
        width: 350px;
        margin: 0px 20px 20px 0;
        float: left;
        height: auto;
    }
    .social-newsletter-images-alt2 {
        width: 100%;
        margin: 0px 20px 20px 0;
        float: left;
        height: auto;
    }
    /*********************** Social Shared ***************************/
    .shared-bottom {
        float:right;
        width:40%;
    }
    .social-media {
        width: 245px;
        height: 45px;
        float: right;
        margin-top: -20px;
        margin-bottom: 10px;
    }
    .social-fb {
        width: 60px;
        height: 60px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/fb-shared.gif) no-repeat;
        overflow: hidden;
        float: left;
        margin-right: 13px;
    }
    .social-fb-alt2 {
        width: 57px;
        height: 60px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/fb-shared.gif) no-repeat;
        overflow: hidden;
        float: left;
        margin-right: 13px;
    }
    .social-fb-count {
        font: bold 14px/14px Arial, Helvetica, sans-serif;
        color: #000;
        width: 45px;
        height: 18px;
        margin: 10px auto;
        text-align: center;
    }
    .social-twitter {
        width: 60px;
        height: 60px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/tweet-shared.gif) no-repeat;
        overflow: hidden;
        float: left;
        margin-right: 13px;
    }
    .social-twitter-alt2 {
        width: 60px;
        height: 60px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/tweet-shared.gif) no-repeat;
        overflow: hidden;
        float: left;
        margin-right: 13px;
    }
    .social-twitter-count {
        font: bold 14px/14px Arial, Helvetica, sans-serif;
        color: #000;
        width: 45px;
        height: 18px;
        margin: 10px auto;
        text-align: center;
    }
    .social-google {
        width: 50px;
        height: 60px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/gplus.gif) no-repeat;
        overflow: hidden;
        float: left;
        margin-right: 13px;
    }
    .social-google-alt2 {
        width: 50px;
        height: 60px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/gplus.gif) no-repeat;
        overflow: hidden;
        float: left;
        margin-right: 13px;
    }
    .social-google-count {
        font: bold 14px/14px Arial, Helvetica, sans-serif;
        color: #000;
        width: 38px;
        height: 18px;
        margin: 10px auto;
        text-align: center;
    }
    .social-email {
        width: 57px;
        height: 62px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/email-shared.gif) no-repeat;
        overflow: hidden;
        float: left;
        margin-right: 13px;
    }
    .social-email-alt2 {
        width: 57px;
        height: 62px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/email-shared.gif) no-repeat;
        overflow: hidden;
        float: left;
        margin-right: 13px;
    }
    .social-email-count {
        font: bold 14px/14px Arial, Helvetica, sans-serif;
        color: #000;
        width: 45px;
        height: 18px;
        margin: 10px auto;
        text-align: center;
    }
    .social-komentar {
        width: 70px;
        height: 60px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/komentar.gif) no-repeat;
        overflow: hidden;
        float: left;
        margin-right: 0px;
    }
    .social-komentar-count {
        font: bold 14px/14px Arial, Helvetica, sans-serif;
        color: #000;
        width: 58px;
        height: 18px;
        margin: 10px auto;
        text-align: center;
    }
    .social-link {
        display: block;
        width: 57px;
        height: 21px;
        overflow: hidden;
    }
    /*********************** Social Shared ***************************/
    /************************ Newsletter ************************/
    .newsletter-submit {
        padding: 8px 12px;
        width: 324px;
        height: 50px;
        font: normal 17px/20px "OpenSansRegular", lucida sans;
        color: #000;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        border: 1px solid #d1d1d1;
        margin-top: 20px;
        background: #ececec;
        font-weight: 500;
    }
    .newsletter-submit-alt2 {
        padding: 4px 12px;
        width: 324px;
        height: 51px;
        font: normal 17px/20px "OpenSansRegular", lucida sans;
        color: #000;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        border: 1px solid #d1d1d1;
        margin-top: 0px;
        background: #ececec;
        font-weight: 500;
        float: right;
    }
    .newsletter-submit input[type="file"] {
        width: 100%;
    }
    #submit-newsletter {
        width: 235px;
        padding: 3px 10px;
        height: 17px;
        outline: none;
        background: #ffffff;
        font: normal 12px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #333;
        float: left;
        border: 1px solid #ccc;
        margin-top: 2px;
    }
    .button-newsletter {
        width: 62px;
        height: 25px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/submit-newsletter.gif) no-repeat;
        border: none;
        margin-left: 5px;
        margin-top: 2px;
    }
    /************************ Newsletter ************************/
    /******************** images artikel ***********************/
    .images-area {
        width: 350px;
        height: auto;
        position: absolute;
        margin-bottom: 10px;
    }
    .images-area-alt2 {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
    .images-area-img {
        width: 340px;
        height: 165px;
        overflow: hidden;
        position: relative;
        background: #fff;
        border: 1px solid #e3e3e3;
        padding: 5px;
    }
    .images-area-img-alt2 {
        width: 98.4%;
        height: auto;
        overflow: hidden;
        position: relative;
        background: #fff;
        border: 1px solid #e3e3e3;
        padding: 0.8%;
    }
    .images-area-img img {
        width: 340px;
        height: auto;
        overflow: hidden;
    }
    .images-area-img-alt2 img {
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    .images-area-desc {
        font: normal 0.650em/21px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #666;
        padding: 5px 5px;
        background: #fff;
        z-index: 1;
        max-height: 21px;
        overflow: hidden;
        position: absolute;
        width: 340px;
    }
    .append-images-desc {
        font: normal 0.650em/16px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #fff;
        padding: 5px 30px 5px 10px;
        background: #000;
        z-index: 1;
        max-height: 51px;
        overflow: hidden;
        position: absolute;
        display: none;
        bottom: 0;
        margin: 10px;
        opacity: 0.7;
        width: 89.8%;
    }
    .images-area-desc-alt2 {
        font: normal 0.650em/16px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #666;
        padding: 5px 5px;
        background: #fff;
        z-index: 1;
        height: auto;
        overflow: hidden;
        position: relative;
    }
    .perbesar-images {
        position: absolute;
        bottom: 5px;
        right: 5px;
        padding: 2px 10px;
        font: normal 0.550em "Lucida Grande","Lucida Sans Unicode", sans-serif;
        background: #fff;
        color: #2ea2db;
        cursor: pointer;
    }
    .perbesar-images a {
        color: #2ea2db;
        text-decoration: none;
    }
    .perkecil-images {
        position: absolute;
        bottom: 5px;
        right: 5px;
        padding: 2px 10px;
        font: normal 0.550em "Lucida Grande","Lucida Sans Unicode", sans-serif;
        background: #fff;
        color: #2ea2db;
        cursor: pointer;
        display: none;
        z-index: 3;
    }
    .perkecil-images a {
        color: #2ea2db;
        text-decoration: none;
    }
    .social-shared {
        margin-top: 220px;
    }
    .social-shared-alt2 {
        margin-top: 0px;
        float: left;
    }
    .append-social-shared {
        display: block;
    }
    .appendSocial {
        display: none;
    }
    /* ============================================ s : komentar =========================================== */
    .button {
        cursor: pointer;
        display: inline;
        background-color: #e6e6e6;
        background-repeat: no-repeat;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#999999), color-stop(25%, #999999), to(#cccccc));
        background-image: -webkit-linear-gradient(#999999, #999999 25%, #cccccc);
        background-image: -moz-linear-gradient(top, #999999, #999999 25%, #cccccc);
        background-image: -ms-linear-gradient(#999999, #999999 25%, #cccccc);
        background-image: -o-linear-gradient(#999999, #999999 25%, #cccccc);
        background-image: linear-gradient(#999999, #999999 25%, #cccccc);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#999999", endColorstr="#cccccc", GradientType=0);
        padding: 3px 14px;
        margin: 0;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
        color: #333;
        font-size: 13px;
        line-height: normal;
        border-left: 1px dotted #a1a1a1;
        border-bottom: none;
        border-right: none;
        border-top: none;
        height: 25px;
        float: right;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -webkit-transition: 0.1s linear background-image;
        -moz-transition: 0.1s linear background-image;
        -ms-transition: 0.1s linear background-image;
        -o-transition: 0.1s linear background-image;
        transition: 0.1s linear background-image;
        overflow: visible;
    }
    .button:hover {
        background: #fefefe;
        background: -moz-linear-gradient(top, #fefefe 0%, #f8f8f8 40%, #e9e9e9 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(40%, #f8f8f8), color-stop(100%, #e9e9e9));
        background: -webkit-linear-gradient(top, #fefefe 0%, #f8f8f8 40%, #e9e9e9 100%);
        background: -o-linear-gradient(top, #fefefe 0%, #f8f8f8 40%, #e9e9e9 100%);
        background: -ms-linear-gradient(top, #fefefe 0%, #f8f8f8 40%, #e9e9e9 100%);
        background: linear-gradient(to bottom, #fefefe 0%, #f8f8f8 40%, #e9e9e9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fefefe", endColorstr="#e9e9e9", GradientType=0);
        outline: none;
    }
    .button:active {
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3), inset 0px 0px 0px #412410;
    }
    .button-syarat {
        cursor: pointer;
        display: inline;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/syarat.gif) center center no-repeat;
        padding: 3px 14px;
        margin: 0;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
        color: #333;
        font-size: 13px;
        line-height: normal;
        border-right: 1px dotted #a1a1a1;
        border-bottom: none;
        border-left: none;
        border-top: none;
        height: 25px;
        float: left;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -webkit-transition: 0.1s linear background-image;
        -moz-transition: 0.1s linear background-image;
        -ms-transition: 0.1s linear background-image;
        -o-transition: 0.1s linear background-image;
        transition: 0.1s linear background-image;
        overflow: visible;
    }
    .button-syarat:hover {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/syarat.gif) center center no-repeat;
        box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.3);
        outline: none;
    }
    .button-syarat:active {
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3), inset 0px 0px 0px #412410;
    }
    .button-syarat-sub {
        cursor: pointer;
        display: inline;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/syarat.gif) center center no-repeat;
        padding: 3px 14px;
        margin: 0;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
        color: #333;
        font-size: 13px;
        line-height: normal;
        border-right: 1px dotted #a1a1a1;
        border-bottom: none;
        border-left: none;
        border-top: none;
        height: 25px;
        float: left;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -webkit-transition: 0.1s linear background-image;
        -moz-transition: 0.1s linear background-image;
        -ms-transition: 0.1s linear background-image;
        -o-transition: 0.1s linear background-image;
        transition: 0.1s linear background-image;
        overflow: visible;
    }
    .button-syarat-sub:hover {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/syarat.gif) center center no-repeat;
        box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.3);
        outline: none;
    }
    .button-syarat-sub:active {
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3), inset 0px 0px 0px #412410;
    }
    .button-end {
        cursor: pointer;
        display: inline-block;
        background-color: #e6e6e6;
        background-repeat: no-repeat;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#999999), color-stop(25%, #999999), to(#e6e6e6));
        background-image: -webkit-linear-gradient(#999999, #999999 25%, #e6e6e6);
        background-image: -moz-linear-gradient(top, #999999, #999999 25%, #e6e6e6);
        background-image: -ms-linear-gradient(#999999, #999999 25%, #e6e6e6);
        background-image: -o-linear-gradient(#999999, #999999 25%, #e6e6e6);
        background-image: linear-gradient(#999999, #999999 25%, #e6e6e6);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#999999", endColorstr="#e6e6e6", GradientType=0);
        padding: 5px 14px 6px;
        margin: 0;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
        color: #333;
        font-size: 13px;
        line-height: normal;
        border: 1px dotted #ccc;
        border-bottom-color: #bbb;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -webkit-transition: 0.1s linear background-image;
        -moz-transition: 0.1s linear background-image;
        -ms-transition: 0.1s linear background-image;
        -o-transition: 0.1s linear background-image;
        transition: 0.1s linear background-image;
        overflow: visible;
        margin-left: 5px;
        border-radius: 3px;
    }
    .button-end:hover {
        background: #fefefe;
        background: -moz-linear-gradient(top, #fefefe 0%, #f8f8f8 40%, #e9e9e9 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(40%, #f8f8f8), color-stop(100%, #e9e9e9));
        background: -webkit-linear-gradient(top, #fefefe 0%, #f8f8f8 40%, #e9e9e9 100%);
        background: -o-linear-gradient(top, #fefefe 0%, #f8f8f8 40%, #e9e9e9 100%);
        background: -ms-linear-gradient(top, #fefefe 0%, #f8f8f8 40%, #e9e9e9 100%);
        background: linear-gradient(to bottom, #fefefe 0%, #f8f8f8 40%, #e9e9e9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fefefe", endColorstr="#e9e9e9", GradientType=0);
        box-shadow: 0 1px 3px #ddd;
        border: 1px dotted #aaa;
    }
    .button-end:active {
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3), inset 0px 0px 0px #412410;
    }
    .button-submit {
        cursor: pointer;
        display: inline;
        background-color: #cccccc;
        background-repeat: no-repeat;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cccccc), color-stop(25%, #cccccc), to(#999));
        background-image: -webkit-linear-gradient(#cccccc, #cccccc 25%, #999);
        background-image: -moz-linear-gradient(top, #cccccc, #cccccc 25%, #999);
        background-image: -ms-linear-gradient(#cccccc, #cccccc 25%, #999);
        background-image: -o-linear-gradient(#cccccc, #cccccc 25%, #999);
        background-image: linear-gradient(#cccccc, #cccccc 25%, #999);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#999999", GradientType=0);
        padding: 3px 14px;
        margin: 0;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
        color: #000;
        font-size: 13px;
        line-height: normal;
        border-left: 1px dotted #a1a1a1;
        border-bottom: none;
        border-right: none;
        border-top: none;
        height: 25px;
        float: right;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -webkit-transition: 0.1s linear background-image;
        -moz-transition: 0.1s linear background-image;
        -ms-transition: 0.1s linear background-image;
        -o-transition: 0.1s linear background-image;
        transition: 0.1s linear background-image;
        overflow: visible;
    }
    .button-submit:hover {
        box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.3);
    }
    .button-submit:active {
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3), inset 0px 0px 0px #412410;
    }
    .button-overlay {
        cursor: pointer;
        display: inline;
        background-color: #cccccc;
        background-repeat: no-repeat;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cccccc), color-stop(25%, #cccccc), to(#999));
        background-image: -webkit-linear-gradient(#cccccc, #cccccc 25%, #999);
        background-image: -moz-linear-gradient(top, #cccccc, #cccccc 25%, #999);
        background-image: -ms-linear-gradient(#cccccc, #cccccc 25%, #999);
        background-image: -o-linear-gradient(#cccccc, #cccccc 25%, #999);
        background-image: linear-gradient(#cccccc, #cccccc 25%, #999);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#999999", GradientType=0);
        padding: 3px 14px;
        margin: 0;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
        color: #333;
        font-size: 13px;
        line-height: normal;
        border-left: 1px solid #a1a1a1;
        border-bottom: none;
        border-right: none;
        border-top: none;
        height: 25px;
        float: right;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -webkit-transition: 0.1s linear background-image;
        -moz-transition: 0.1s linear background-image;
        -ms-transition: 0.1s linear background-image;
        -o-transition: 0.1s linear background-image;
        transition: 0.1s linear background-image;
        overflow: visible;
    }
    .button-overlay:hover {
        box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.3);
    }
    .button-overlay:active {
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3), inset 0px 0px 0px #412410;
    }
    .button-login {
        color: #fff;
        background-color: #0064cd;
        background-repeat: repeat-x;
        background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
        background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
        background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
        background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
        background-image: -o-linear-gradient(top, #049cdb, #0064cd);
        background-image: linear-gradient(top, #049cdb, #0064cd);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#049cdb", endColorstr="#0064cd", GradientType=0);
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        border-color: #0064cd #0064cd #003f81;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        cursor: pointer;
        border-radius: 5px;
        padding: 5px 15px;
        _padding: 5px 5px;
        font: normal 14px "MyriadPro-Regular", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 1px;
        margin: 0;
    }
    .button-login:hover {
        background: #0064cd;
    }
    .button-login:active {
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3), inset 0px 0px 0px #ccc;
    }
    .button-register {
        color: #fff;
        background-color: #57a957;
        background-repeat: repeat-x;
        background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
        background-image: -moz-linear-gradient(top, #62c462, #57a957);
        background-image: -ms-linear-gradient(top, #62c462, #57a957);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
        background-image: -webkit-linear-gradient(top, #62c462, #57a957);
        background-image: -o-linear-gradient(top, #62c462, #57a957);
        background-image: linear-gradient(top, #62c462, #57a957);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#62c462", endColorstr="#57a957", GradientType=0);
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        border-color: #57a957 #57a957 #3d773d;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        cursor: pointer;
        border-radius: 5px;
        padding: 5px 15px;
        font: normal 14px "MyriadPro-Regular", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 1px;
    }
    .button-register:hover {
        background: #57a957;
    }
    .button-register:active {
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3), inset 0px 0px 0px #000;
    }
    .ligthbox-container {
        display: none;
        content:" ";
        height: 100%;
        width: 100%;
        position: fixed;
        _position: relative;
        left: 0;
        top: 0;
        background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9)));
        background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
        background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
        background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
        background: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#00000000", GradientType=1);
        z-index: 999;
    }
    .slide-container {
        display: none;
        content:" ";
        height: 190px;
        width: 100%;
        position: relative;
        left: 0;
    }
    .slide-container-sub {
        display: none;
        content:" ";
        height: auto;
        width: 100%;
        position: relative;
        left: 0;
    }
    .slide-container-syarat-sub {
        display: none;
        content:" ";
        height: auto;
        width: 100%;
        position: relative;
        left: 0;
    }
    .bottom-container {
        display: none;
        content:" ";
        height: 100%;
        width: 100%;
        position: relative;
    }
    .window-container {
        display: block;
        background: #fcfcfc;
        margin: 8em auto;
        width: 500px;
        padding: 0px;
        text-align: left;
        z-index: 3;
        border-radius: 5px;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
        -webkit-transition: 0.4s ease-out;
        -moz-transition: 0.4s ease-out;
        -ms-transition: 0.4s ease-out;
        -o-transition: 0.4s ease-out;
        transition: 0.4s ease-out;
        opacity: 0;
        position: relative;
        overflow: hidden;
    }
    .zoomin {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
    .zoomout {
        -webkit-transform: scale(0.7);
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        transform: scale(0.7);
    }
    .window-container-visible {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    .window-container h3 {
        margin: 1em 0 0.5em;
        font-family:"Oleo Script";
        font-weight: normal;
        font-size: 25px;
        text-align: center;
    }
    .close {
        display: block;
        position: absolute;
        top: 5px;
        right: 10px;
        background: #000 url(http://assets.kompas.com/data/2013/kompascom/images/bg-pagination.gif) repeat-x;
        border: 1px dotted #aaa;
        padding: 5px 14px;
        color: #fff;
        font-family: Helvetica, sans-serif;
        font-size: 10px;
        border-radius: 3px;
        box-shadow: 0 1px 3px #999;
        -webkit-transition: 0.2s linear;
        -moz-transition: 0.2s linear;
        -ms-transition: 0.2s linear;
        -o-transition: 0.2s linear;
        transition: 0.2s linear;
        cursor: pointer;
    }
    .close:hover {
        background-color: #c43c35;
        background-repeat: repeat-x;
        background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
        background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
        background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
        background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
        background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
        background-image: linear-gradient(top, #ee5f5b, #c43c35);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ee5f5b", endColorstr="#c43c35", GradientType=0);
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        border-color: #c43c35 #c43c35 #882a25;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    }
    .close:active {
        background: #f4f4f4;
        background: -moz-linear-gradient(top, #f4f4f4 0%, #efefef 40%, #dcdcdc 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f4f4), color-stop(40%, #efefef), color-stop(100%, #dcdcdc));
        background: -webkit-linear-gradient(top, #f4f4f4 0%, #efefef 40%, #dcdcdc 100%);
        background: -o-linear-gradient(top, #f4f4f4 0%, #efefef 40%, #dcdcdc 100%);
        background: -ms-linear-gradient(top, #f4f4f4 0%, #efefef 40%, #dcdcdc 100%);
        background: linear-gradient(to bottom, #f4f4f4 0%, #efefef 40%, #dcdcdc 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4f4f4", endColorstr="#dcdcdc", GradientType=0);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    .close-submit {
        display: block;
        color: #ff9600;
        font-family:"Lucida Grande","Lucida Sans Unicode", sans-serif;
        font-size: 12px;
        border-radius: 3px;
        -webkit-transition: 0.2s linear;
        -moz-transition: 0.2s linear;
        -ms-transition: 0.2s linear;
        -o-transition: 0.2s linear;
        transition: 0.2s linear;
        cursor: pointer;
        margin-left: 5px;
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: none;
        border: none;
        padding: 0 0 0 15px;
    }
    .close-submit:hover {
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        border-color: #c43c35 #c43c35 #882a25;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    }
    .close-submit:active {
    }
    .close-submit-sub {
        display: block;
        color: #ff9600;
        font-family:"Lucida Grande","Lucida Sans Unicode", sans-serif;
        font-size: 12px;
        border-radius: 3px;
        -webkit-transition: 0.2s linear;
        -moz-transition: 0.2s linear;
        -ms-transition: 0.2s linear;
        -o-transition: 0.2s linear;
        transition: 0.2s linear;
        cursor: pointer;
        margin-left: 5px;
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: none;
        border: none;
        padding: 0 0 0 15px;
    }
    .close-submit-sub:hover {
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        border-color: #c43c35 #c43c35 #882a25;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    }
    .header-lightbox {
        background: #fafafa;
        background: -moz-linear-gradient(top, #f1f1f1 0%, #f4f4f4 40%, #dddddd 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f1f1), color-stop(40%, #f4f4f4), color-stop(100%, #dddddd));
        background: -webkit-linear-gradient(top, #f1f1f1 0%, #f4f4f4 40%, #dddddd 100%);
        background: -o-linear-gradient(top, #fafafa 0%, #f4f4f4 40%, #e5e5e5 100%);
        background: -ms-linear-gradient(top, #fafafa 0%, #f4f4f4 40%, #e5e5e5 100%);
        background: linear-gradient(to bottom, #fafafa 0%, #f4f4f4 40%, #e5e5e5 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fafafa", endColorstr="#e5e5e5", GradientType=0);
        height: 20px;
        padding: 10px;
        font: normal 16px "MyriadPro-Bold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #666;
        text-transform: uppercase;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
    }
    .login-box {
        width: 40%;
        margin: 0px 0;
        background: #fafafa;
        background: -moz-linear-gradient(top, #fafafa 0%, #f4f4f4 40%, #e5e5e5 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(40%, #f4f4f4), color-stop(100%, #e5e5e5));
        background: -webkit-linear-gradient(top, #fafafa 0%, #f4f4f4 40%, #e5e5e5 100%);
        background: -o-linear-gradient(top, #fafafa 0%, #f4f4f4 40%, #e5e5e5 100%);
        background: -ms-linear-gradient(top, #fafafa 0%, #f4f4f4 40%, #e5e5e5 100%);
        background: linear-gradient(to bottom, #fafafa 0%, #f4f4f4 40%, #e5e5e5 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fafafa", endColorstr="#e5e5e5", GradientType=0);
        boder: 1px dotted #ccc;
        box-shadow: 0 1px 1px #333;
        float: left;
        color: #666;
        font: normal 10px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        padding: 10px;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
        height: 230px;
        position: relative;
    }
    .login-box-submit {
        width: 95%;
        margin: 0px 0;
        background: #464646;
        boder: 1px dotted #ccc;
        float: left;
        color: #000;
        font: normal 11px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        padding: 20px;
        height: 190px;
        position: relative;
        background: #eee;
    }
    .login-box-submit h1 {
        font: normal 11px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #000;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }
    .login-box-submit-sub {
        width: 595px;
        margin: 0px 0;
        background: #464646;
        boder: 1px dotted #ccc;
        float: left;
        color: #fff;
        font: normal 11px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        padding: 20px;
        height: auto;
        position: relative;
        background: #333;
    }
    .login-box-submit-sub h1 {
        font: normal 11px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #fff;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }
    .login-box-right {
        width: 300px;
        margin: 0px 0;
        background: #f5f5f5;
        boder: 1px dotted #ccc;
        box-shadow: 0 1px 1px #333;
        float: left;
        color: #666;
        font: normal 10px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        padding: 10px;
        height: 230px;
        position: relative;
    }
    .login-box-right-submit {
        width: 300px;
        margin: 0px 0;
        background: #727272;
        boder: 1px dotted #ccc;
        float: left;
        color: #fff;
        font: normal 10px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        padding: 10px;
        height: 190px;
        position: relative;
    }
    .has-js .label_check, .has-js .label_check {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/check-off.png) left center no-repeat;
        cursor: pointer;
        color: #666;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
    }
    .has-js label.c_on {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/check-on.png) left center no-repeat;
        cursor: pointer;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
        color: #333
    }
    .has-js .label_check input, .has-js .label_radio input {
        position: relative;
        left: -9999px;
        height: 25px;
        margin: 0;
        padding: 0;
        float: right;
    }
    /* sub comentar */
    .has-js-sub .label_check-sub, .has-js-sub .label_check-sub {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/check-off.png) left center no-repeat;
        cursor: pointer;
        color: #666;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
    }
    .has-js-sub label.c_on-sub {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/check-on.png) left center no-repeat;
        cursor: pointer;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
        color: #333
    }
    .has-js-sub .label_check-sub input {
        position: relative;
        left: -9999px;
        height: 25px;
        margin: 0;
        padding: 0;
        float: right;
    }
    .login-box a {
        color: #ff9600;
    }
    .login-box a:hover {
        color: #ff9600;
    }
    .login-box h1 {
        font: normal 14px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #444;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }
    .login-box-input {
        width: 40%;
        padding: 20px;
        float: left;
    }
    .input-login {
        border: 0px dotted #A5C2C8;
        padding: 5px 10px;
        margin: 0 0 15px 0;
        width: 220px;
        height: 30px;
        font: normal 16px/14px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        float: left;
        resize: none;
        color: #666;
        background: #eee;
        border-radius: 5px;
        border: 0;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
        box-shadow: inset rgba(0, 0, 0, .4) 0 1px 1px;
        outline: none;
    }
    /******************* Form komentar **************************/
    .label {
        padding: 5px;
        font: normal 10px Arial, sans-serif;
        position: absolute;
        top: 0;
        left: 0;
    }
    .form-komentar {
        padding: 10px 0px 20px;
        width: 100%;
        overflow: hidden;
        background: #fff;
        margin: 20px 0 0px;
        position: relative;
        border-top: 2px solid #000;
    }
    .form-komentar-br {
        border-bottom: 1px dotted #cbcbcb;
        height: 1;
        width: 100%
    }
    .form-komentar p {
        margin: 0 0 10px 0;
        float: left;
        clear: both;
        display: block;
    }
    .form-komentar-count {
        width: 140px;
        margin: 0 8px;
        font: normal 13px/22px "Lucida Grande","Lucida Sans Unicode";
        text-align: left;
        color: #ccc;
        float: left;
    }
    .form-komentar-count a {
        font: normal 13px/22px "Lucida Grande","Lucida Sans Unicode";
        color: #000;
        text-decoration: none;
    }
    .form-komentar label {
        font: normal 12px/12px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #ccc;
        padding: 0 0 0 5px;
    }
    .form-komentar .w {
        float: left;
        clear: both;
        font: bold 0.8em Helvetica, Arial, sans-serif;
        overflow: hidden;
        margin-top: 3px;
        width: 100%;
    }
    .form-komentar .w span {
        padding: 0 0 5px;
        float: left;
    }
    .form-komentar .input {
        border: 1px solid #999;
        border-bottom: none;
        margin: 0 0 0px 0;
        width: 95.7%;
        height: 10px;
        font: normal 14px/22px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        resize: none;
        color: #666;
        background: #fbf4e9;
        border-radius: 3px 3px 0px 0px;
        -webkit-border-radius: 3px 3px 0px 0px;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
        box-shadow: inset rgba(0, 0, 0, .4) 0 1px 1px;
        outline: none;
    }
    .form-komentar .input-after {
        border: 1px solid #999;
        border-bottom: none;
        margin: 0 0 0px 0;
        width: 95.7%;
        height: 10px;
        font: normal 14px/22px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        resize: none;
        color: #666;
        background: #fbf4e9;
        border-radius: 3px 3px 0px 0px;
        -webkit-border-radius: 3px 3px 0px 0px;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
        box-shadow: inset rgba(0, 0, 0, .4) 0 1px 1px;
        outline: none;
    }
    .form-komentar .input-show {
        border: 1px solid #999;
        border-bottom: none;
        margin: 0 0 0px 0;
        width: 95.2%;
        height: 10px;
        font: normal 14px/22px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        resize: none;
        color: #666;
        background: #fbf4e9;
        border-radius: 3px 3px 0px 0px;
        -webkit-border-radius: 3px 3px 0px 0px;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
        box-shadow: inset rgba(0, 0, 0, .4) 0 1px 1px;
        outline: none;
    }
    .form-komentar .input-show-after {
        border: 1px solid #999;
        border-bottom: none;
        margin: 0 0 0px 0;
        width: 95.2%;
        height: 10px;
        font: normal 14px/22px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        resize: none;
        color: #666;
        background: #fbf4e9;
        border-radius: 3px 3px 0px 0px;
        -webkit-border-radius: 3px 3px 0px 0px;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
        box-shadow: inset rgba(0, 0, 0, .4) 0 1px 1px;
        outline: none;
    }
    .form-komentar .w label {
        padding: 0;
    }
    .form-komentar-photo {
        width: 25px;
        height: 25px;
        overflow: hidden;
        float: left;
        margin-bottom: 5px;
    }
    .form-komentar-photo img {
        width: 25px;
        height: auto;
        overflow: hidden;
    }
    .form-komentar-arrow {
        width: 15px;
        height: 40px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/arrow-comment.png) right top no-repeat;
        float: left;
    }
    .submit-komentar {
        height: 30px;
        float: left;
        border: none;
        font: normal 13px/12px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #000;
        margin: 0 5px;
        padding: 0px 15px;
        background: #fefefe;
        /* Old browsers */
        background: -moz-linear-gradient(top, #fefefe 0%, #d6d6d6 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #d6d6d6));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #fefefe 0%, #d6d6d6 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #fefefe 0%, #d6d6d6 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #fefefe 0%, #d6d6d6 100%);
        /* IE10+ */
        background: linear-gradient(to bottom, #fefefe 0%, #d6d6d6 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fefefe", endColorstr="#d6d6d6", GradientType=0);
        /* IE6-9 */
    }
    .submit-area {
        width: 99.7%;
        height: 25px;
        overflow: hidden;
        background-color: #cccccc;
        background-repeat: no-repeat;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f0f0f0), color-stop(25%, #f0f0f0), to(#c5c5c5));
        background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 25%, #c5c5c5);
        background-image: -moz-linear-gradient(top, #f0f0f0, #f0f0f0 25%, #c5c5c5);
        background-image: -ms-linear-gradient(#f0f0f0, #f0f0f0 25%, #c5c5c5);
        background-image: -o-linear-gradient(#f0f0f0, #f0f0f0 25%, #c5c5c5);
        background-image: linear-gradient(#f0f0f0, #f0f0f0 25%, #c5c5c5);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0", endColorstr="#c5c5c5", GradientType=0);
        border-radius: 3px 3px 0px 0px;
        -webkit-border-radius: 0px 0px 3px 3px;
        border: 1px solid #999;
    }
    .syarat-komentar {
        font: normal 12px/12px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #000;
        padding: 5px;
        background: #fff;
        text-align: center;
        width: 120px;
        position: absolute;
        right: 0px;
        bottom: 0px;
    }
    .defaultText {
        padding: 2%;
    }
    .defaultTextActive {
        color: #ccc;
        font-style: italic;
        padding: 2%;
    }
    .found-search {
        font: normal 14px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #fff;
        margin: 10px 0;
        padding-bottom: 10px;
        border-bottom: 1px dotted #464646;
        width: 780px;
    }
    /******************* Form komentar sub **************************/
    .label {
        padding: 5px;
        font: normal 10px Arial, sans-serif;
        position: absolute;
        top: 0;
        left: 0;
    }
    .form-komentar-sub {
        padding: 10px 0px;
        width: 635px;
        overflow: hidden;
        background: #464646;
        margin: 0px 0 0 75px;
        position: relative;
    }
    .form-komentar-br {
        border-bottom: 1px dotted #cbcbcb;
        height: 1;
        width: 100%
    }
    .form-komentar-sub p {
        margin: 0 0 10px 0;
        float: left;
        clear: both;
        display: block;
    }
    .form-komentar-count {
        width: 140px;
        margin: 0 8px;
        font: normal 13px/22px "Lucida Grande","Lucida Sans Unicode";
        text-align: left;
        color: #ccc;
        float: left;
    }
    .form-komentar-sub label {
        font: normal 12px/12px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #ccc;
        padding: 0 0 0 5px;
    }
    .form-komentar-sub .w {
        float: left;
        clear: both;
        font: bold 0.8em Helvetica, Arial, sans-serif;
        color: #333;
        overflow: hidden;
        margin-top: 3px;
    }
    .form-komentar-sub .w span {
        padding: 0 0 5px;
        float: left;
    }
    .form-komentar-sub .input {
        border: 0px dotted #A5C2C8;
        padding: 8px 10px;
        margin: 0 0 0px 0;
        width: 710px;
        height: 10px;
        font: normal 14px/22px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        resize: none;
        color: #666;
        background: #e5e5e5;
        border-radius: 3px 3px 0px 0px;
        -webkit-border-radius: 3px 3px 0px 0px;
        border: 0;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
        box-shadow: inset rgba(0, 0, 0, .4) 0 1px 1px;
        outline: none;
    }
    .form-komentar-comcou {
        border-bottom: 0px dotted #7e7e7e;
        float: right;
        font: normal 16px/24px "OpenSansRegular", arial;
        margin-bottom: 10px;
    }
    .form-komentar-link {
        font: normal 1em/1em "OpenSansRegular", arial;
        margin-bottom: 10px;
        border-bottom: 1px solid #e2e2e2;
        padding: 0px 0 10px;
        text-align: center;
        width: 100%;
        display: none;
    }
    .form-komentar-sub .input-after-sub {
        border: 0px dotted #A5C2C8;
        padding: 8px 10px;
        margin: 0 0 0px 0;
        width: 635px;
        height: 10px;
        font: normal 14px/22px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        resize: none;
        color: #666;
        background: #e5e5e5;
        border-radius: 3px 3px 0px 0px;
        -webkit-border-radius: 3px 3px 0px 0px;
        border: 0;
        text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
        box-shadow: inset rgba(0, 0, 0, .4) 0 1px 1px;
        outline: none;
        position: relative;
        clear: both;
    }
    .form-komentar-sub .w label {
        padding: 0;
    }
    .form-komentar-photo {
        width: 25px;
        height: 25px;
        overflow: hidden;
        float: left;
        margin-bottom: 5px;
    }
    .form-komentar-photo img {
        width: 25px;
        height: auto;
        overflow: hidden;
    }
    .form-komentar-arrow {
        width: 15px;
        height: 40px;
        background: url(http://assets.kompas.com/data/2013/kompascom/images/arrow-comment.png) right top no-repeat;
        float: left;
    }
    .submit-komentar-sub {
        height: 30px;
        float: left;
        border: none;
        font: normal 13px/12px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #000;
        margin: 0 5px;
        padding: 0px 15px;
        background: #fefefe;
        /* Old browsers */
        background: -moz-linear-gradient(top, #fefefe 0%, #d6d6d6 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #d6d6d6));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #fefefe 0%, #d6d6d6 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #fefefe 0%, #d6d6d6 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #fefefe 0%, #d6d6d6 100%);
        /* IE10+ */
        background: linear-gradient(to bottom, #fefefe 0%, #d6d6d6 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fefefe", endColorstr="#d6d6d6", GradientType=0);
        /* IE6-9 */
    }
    .submit-area-sub {
        width: 635px;
        height: 25px;
        overflow: hidden;
        background-color: #cccccc;
        background-repeat: no-repeat;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f0f0f0), color-stop(25%, #f0f0f0), to(#c5c5c5));
        background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 25%, #c5c5c5);
        background-image: -moz-linear-gradient(top, #f0f0f0, #f0f0f0 25%, #c5c5c5);
        background-image: -ms-linear-gradient(#f0f0f0, #f0f0f0 25%, #c5c5c5);
        background-image: -o-linear-gradient(#f0f0f0, #f0f0f0 25%, #c5c5c5);
        background-image: linear-gradient(#f0f0f0, #f0f0f0 25%, #c5c5c5);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0", endColorstr="#c5c5c5", GradientType=0);
        border-radius: 3px 3px 0px 0px;
        -webkit-border-radius: 0px 0px 3px 3px;
        border-top: 1px dotted #a1a1a1;
    }
    .submit-area-show {
        height: 25px;
        overflow: hidden;
        background-color: #cccccc;
        background-repeat: no-repeat;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f0f0f0), color-stop(25%, #f0f0f0), to(#c5c5c5));
        background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 25%, #c5c5c5);
        background-image: -moz-linear-gradient(top, #f0f0f0, #f0f0f0 25%, #c5c5c5);
        background-image: -ms-linear-gradient(#f0f0f0, #f0f0f0 25%, #c5c5c5);
        background-image: -o-linear-gradient(#f0f0f0, #f0f0f0 25%, #c5c5c5);
        background-image: linear-gradient(#f0f0f0, #f0f0f0 25%, #c5c5c5);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0", endColorstr="#c5c5c5", GradientType=0);
        border-radius: 3px 3px 0px 0px;
        -webkit-border-radius: 0px 0px 3px 3px;
        border: 1px solid #999;
        width: 99.2%;
    }
    .syarat-komentar {
        font: normal 12px/12px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #000;
        padding: 5px;
        background: #fff;
        text-align: center;
        width: 120px;
        position: absolute;
        right: 0px;
        bottom: 0px;
    }
    .m_tool_01 {
        padding: 5px 0 5px 0;
        border-bottom: dotted 1px #cbcbcb;
        cursor: pointer;
    }
    .m_tool_01 a {
        font: normal 11px Arial, Helvetica, sans-serif;
        color: #ccc;
        text-decoration: none;
    }
    .m_tool_01 a:hover {
        font: normal 11px Arial, Helvetica, sans-serif;
        color: #333;
        text-decoration: underline;
    }
    .m_tool_01 a:active {
        font: normal 11px Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: underline;
    }
    /***************** old comment **********************************/
    .cangkang_master2011 {
        width: 996px;
        background: #999999;
        border: dotted 2px #dcd9d9
    }
    .cangkang_konten002 {
        background-color: #999999;
        padding: 10px 10px 10px 10px;
    }
    .content_kiri_detail {
        width: 655px;
        float: left;
        padding-left: 0px;
        padding-top: 5px;
    }
    .content_kanan {
        width: 300px;
        float: right;
    }
    /* CSS komentar for all */
    .c_left {
        float: left;
    }
    .c_right {
        float: right;
    }
    .c_clearit {
        clear: both;
    }
    .n_clearit {
        clear: both;
    }
    .c_font10 {
        font-size: 10px;
    }
    .c_font11 {
        font-size: 11px;
    }
    .c_font12 {
        font-size: 12px;
    }
    .c_font14 {
        font-size: 14px;
    }
    .c_font16 {
        font-size: 16px;
    }
    .c_pd_5 {
        padding: 5px 5px 5px 0;
    }
    .c_pr_3 {
        padding-right: 3px;
    }
    .c_pr_15 {
        padding-right: 15px;
    }
    .c_pb_5 {
        padding-bottom: 5px;
    }
    .c_pb_10 {
        padding-bottom: 10px;
    }
    .c_pb_15 {
        padding-bottom: 15px;
    }
    .c_pb_20 {
        padding-bottom: 20px;
    }
    .c_pr_5 {
        padding-right: 5px;
    }
    .c_pr_10 {
        padding-right: 10px;
    }
    .c_pt_3 {
        padding-top: 3px;
    }
    .c_pt_5 {
        padding-top: 5px;
    }
    .c_pt_10 {
        padding-top: 10px;
    }
    .c_pt_20 {
        padding-top: 20px;
    }
    .c_pt_30 {
        padding-top: 30px;
    }
    .c_pl_80 {
        padding-left: 80px;
    }
    .c_lh18 {
        line-height: 18px;
    }
    .c_lh22 {
        line-height: 22px;
    }
    .c_w150 {
        width: 150px;
    }
    .c_w250 {
        width: 250px;
    }
    .c_w300 {
        width: 300px;
    }
    .c_w350 {
        width: 350px;
    }
    .c_w425 {
        width: 425px;
    }
    .c_w395 {
        width: 395px;
    }
    .c_w515 {
        width: 515px;
    }
    .c_h100 {
        height: 100px;
    }
    .c_h300 {
        min-height: 300px;
    }
    .border_kanan {
        border-right: 1px dotted #cbcbcb;
    }
    .bl_kom {
        border-bottom: 1px dotted #cbcbcb;
    }
    .bt_kom {
        border-top: 1px dotted #cbcbcb;
    }
    .c_mb_10 {
        margin-bottom: 10px;
    }
    .c_mb_15 {
        margin-bottom: 15px;
    }
    .c_mr_15 {
        margin-right: 15px;
    }
    .c_abu01_komen {
        color: #fff;
    }
    .c_abu01_komen a {
        text-decoration: none;
        color: #666;
    }
    .c_abu01_komen a:hover {
        text-decoration: underline;
    }
    .c_abu02_komen {
        color: #666;
        float: left;
    }
    .c_abu02_komen a {
        text-decoration: none;
        color: #808080;
    }
    .c_abu02_komen a:hover {
        text-decoration: underline;
    }
    .c_abu03_komen {
        color: #000;
    }
    .c_abu03_komen a {
        text-decoration: none;
        color: #fff;
    }
    .c_abu03_komen a:hover {
        text-decoration: underline;
    }
    .c_abu03_komen {
        color: #000;
    }
    .c_abu03_komen a {
        text-decoration: none;
        color: #fff;
    }
    .c_abu03_komen a:hover {
        text-decoration: underline;
    }
    .c_biru01_komen {
        color: #ccc;
        float: left;
        padding-right: 10px;
    }
    .c_biru01_komen a {
        text-decoration: none;
        color: #006699;
        font-weight: bold;
    }
    .c_biru01_komen a:hover {
        text-decoration: underline;
    }
    .c_oranye01_komen {
        color: #fff;
    }
    .c_oranye01_komen a {
        text-decoration: none;
        color: #f57b1f;
    }
    .c_oranye01_komen a:hover {
        text-decoration: underline;
    }
    .c_merah01_komen {
        color: #fff;
    }
    .c_merah01_komen a {
        text-decoration: none;
        color: #666;
    }
    .c_merah01_komen a:hover {
        text-decoration: underline;
    }
    .page_komen a {
        font: bold 12px arial;
        color: #999;
        text-decoration: none;
        padding: 3px;
        display: inline;
    }
    .page_komen a:hover {
        color: #999;
        text-decoration: underline;
    }
    .page_komen a.aktif {
        color: #f66000;
        text-decoration: none;
    }
    .btn_tanggapi_komen a {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/btn_tanggapi_komen.gif) 0px -42px;
        height: 20px;
        width: 70px;
        display: block;
    }
    .btn_tanggapi_komen a:hover {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/btn_tanggapi_komen.gif) 0px 20px;
    }
    .btn_lapor_komen a {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/btn_laporkan_komen.gif) 0px 0px;
        height: 20px;
        width: 71px;
        display: block;
    }
    .btn_lapor_komen a:hover {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/btn_laporkan_komen.gif) 0px -21px;
    }
    .list_komen_nw ul {
        list-style: none;
        padding: 10px 0px 0px 0px;
        margin: 0px;
    }
    .list_komen_nw li.main {
        padding: 12px 0px;
        border-bottom: dotted 1px #cbcbcb;
    }
    .list_komen_nw li.sub {
        padding: 12px 0px 13px 0px;
        margin-left: 70px;
        border-top: dotted 1px #cbcbcb;
    }
    .user_komen img {
        width: 45px;
        height: 45px;
        border: 0px;
    }
    .komen_list_1 {
        padding: 5px 10px 5px 20px;
    }
    .w_isikomen_main {
        width: 65%;
        overflow: auto;
    }
    .w_isikomen_sub {
        width: 58%;
    }
    .w_tool_komen {
        width: auto;
        margin-right: 0px;
    }
    .w_tool_komen-sub {
        width: auto;
        margin-right: 0px;
    }
    .m_tool_02 {
        padding: 5px 0 5px 0;
    }
    .m_tool_02 a {
        font: normal 11px Arial, Helvetica, sans-serif;
        color: #808080;
        text-decoration: none;
    }
    .m_tool_02 a:hover {
        font: normal 11px Arial, Helvetica, sans-serif;
        color: #ccc;
        text-decoration: underline;
    }
    .see_all_komen {
        font: bold 12px Arial, Helvetica, sans-serif;
        color: #ccc;
        text-decoration: none;
    }
    .see_all_komen a {
        font: bold 12px Arial, Helvetica, sans-serif;
        color: #666;
        text-decoration: none;
    }
    .see_all_komen a:hover {
        text-decoration: underline;
    }
    .btn_komenlanjut a {
        background-color: #f2f7fa;
        padding: 1px;
        border: dotted 1px #a1bacc;
        width: 300px;
        height: 60px;
        padding: 10px;
        font: normal 12px Arial, Helvetica, sans-serif;
        color: #ccc;
        text-align: center;
        text-decoration: none;
    }
    .btn_komenlanjut a:hover {
        text-decoration: underline;
    }
    .btn_jempol_up a {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/btn_jempol_up.gif) 0px -39px;
        height: 19px;
        width: 18px;
        display: block;
    }
    .btn_jempol_up a:hover {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/btn_jempol_up.gif) 0px 19px;
    }
    .btn_jempol_down a {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/btn_jempol_down.gif) 0px -39px;
        height: 19px;
        width: 18px;
        display: block;
    }
    .btn_jempol_down a:hover {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/btn_jempol_down.gif) 0px 19px;
    }
    .form_komen {
        margin: 0px;
        padding: 0px;
    }
    .contentLeftKompascom-alt1 {
        float: left;
        width: 760px;
        padding-right: 40px;
    }
    .contentLeftKompascom-alt2 {
        float: left;
        width: 760px;
        padding-right: 40px;
    }
    /* ============================================ e : komentar =========================================== */
    /* secondary banner artikel */
    .bannerRA {
        width: 300px;
        height: 250px;
        float: right;
    }
    .bannerR2A {
        width: 300px;
        height: 250px;
        float: right;
        margin-top: 20px;
    }
    .bannerR3A {
        width: 300px;
        height: 250px;
        float: right;
        margin-top: 20px;
    }
    .aktivitasA {
        width: 300px;
        height: 250px;
        background: #ccc;
        float: right;
        margin-top: 20px;
        overflow: hidden;
    }
    .aktivitasA img {
        width: 100%;
        height: auto;
    }
    .terbaruTerkomentari-artikelA {
        width: 300px;
        height: 400px;
        background: #fff;
        margin: 20px 0 0 0px;
        float: right;
        overflow: hidden;
    }
    .imgterbaruTerkomentariA {
        float: left;
        width: 55px;
        height: 55px;
        overflow: hidden;
    }
    .imgterbaruTerkomentariA img {
        width: 55px;
        height: 55px;
        overflow: hidden;
    }
    /* s : revisi 16 april */
    .imgterbaru {
        float: left;
        width: 65px;
        height: 65px;
        overflow: hidden;
        position:relative;
    }
    .imgterbaru img {
        width: auto;
        height: 65px;
        overflow: hidden;
        position:absolute;
        left:-30px;
    }
    /* e : revisi 16 april */
    .listTerbarkom-artikelA {
        border-bottom: dotted 0px #dadada;
        padding: 9px 0;
    }
    .titleTerbakom-artikelA {
        float: left;
        padding-left: 10px;
        height: 35px;
        overflow: hidden;
        width: 210px;
    }
    .titleTerbakom-artikelA a {
        font: normal 0.75em/16px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        display: inline-block;
        overflow: hidden;
    }
    .titleTerbakom-artikelA a:hover {
        text-decoration: underline;
    }
    .KatTitle-artikelA {
        font: normal 0.625em "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #ff9900;
        padding-left: 10px;
        float: left;
        max-width: 220px;
    }
    .tabTerbaruA {
        padding: 0 10px;
    }
    .tabTerkomentariA {
        padding: 0 10px;
    }
    /* topik pilihan */
    .topikPilihanA {
        width: 100%;
        height: auto;
        float: left;
        padding: 2% 0%;
        overflow: hidden;
    }
    .topikPilihanA h1 {
        font: normal 1em "OpenSansBold", Arial, Helvetica, sans-serif;
        border-bottom: solid 2px #000;
        color: #000;
        margin: 10px 0;
        padding: 5px 0;
    }
    .noTopilA {
        font: normal 1.25em "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #fec287;
        display: table-cell;
        vertical-align: middle;
        float: left;
    }
    .titleTopilA {
        display: table-cell;
        vertical-align: middle;
        height: 48px;
        overflow: hidden;
        float: left;
    }
    .titleTopilA a {
        font: normal 0.6875em/16px "OpenSansRegular", Arial, Helvetica, sans-serif;
        color: #000;
        text-decoration: none;
        padding: 0px 0 4px 0px;
        width: 170px;
        height: 32px;
        overflow: hidden;
    }
    .titleTopilA a:hover {
        text-decoration: underline;
    }
    .listTopikPilihanA {
        width: 18%;
        padding: 10px 0;
        float: left;
        margin-right: 2.5%;
    }
    .imgTopikPilhanA {
        float: left;
        width: 100%;
        height: 70px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .imgTopikPilhanA img {
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    .imgBottomBox {
        float: left;
        width: 40%;
        height: 70px;
        overflow: hidden;
    }
    .imgBottomBox img {
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    .listTopikPilihanA:last-child {
        margin-right: 0;
    }
    /* secondary banner artikel */
    /* Calendar */
    #calendarField {
        background:#ededed url(http://assets.kompas.com/data/2013/kompascom/images/arrow-bottom.gif) right center no-repeat;
        outline:none;
        border:none;
        cursor:pointer;
        height:auto;
        width:88%;
        padding:3.4% 6%;
        font:normal 12px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        border-left:1px solid #e7e7e7;
    }
    .w_Date {
        width:37.4%;
    }
    .JsCalendar {
        position:relative;
        width:93%;
        font-family:"Lucida Grande","Lucida Sans Unicode", sans-serif;
        border: 10px solid #ededed;
        background:#fff;
    }
    /* Personalisasi Silver */
    .mykompasIndex-silver {
        width: 235px;
        height: 502px;
        background: #e0dfdb;
        float: left;
        margin-top: 20px;
        border: solid 1px #dedede;
        border-left: none;
        padding: 15px 0 0 20px;
        overflow: hidden;
    }
    .personalName-silver {
        width:75%;
        height:43px;
        overflow:hidden;
        float:left;
        margin-left:5px;
    }
    .personalAkun-silver {
        margin-bottom:10px;
    }
    .personalName-silver h1 {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        margin:0;
        padding:0;
        height:16px;
        overflow:hidden;
    }
    .personalName-silver h1 a {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        text-decoration:none;
    }
    .personalName-silver h1 a:hover {
        text-decoration:underline;
    }
    .personalImg-silver {
        width:31px;
        height:31px;
        overflow:hidden;
        float:left;
    }
    .personalImg-silver img {
        width:31px;
        height:auto;
        overflow:hidden;
    }
    .personalPoin-silver {
        float:left;
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #8e8e8b;
        width: auto;
        height:22px;
        overflow:hidden;
        border-right: 1px solid #c9c8c5;
        padding: 2px 10px 0 0;
    }
    .personalPoin-silver span {
        font:13px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #4c4c4a;
        margin:0 5px;
    }
    .personalPoin-silver span a {
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#aed6ef;
    }
    .notification-page-silver {
        position: relative;
        float: left;
        z-index: 10;
        height:24px;
        padding-top:2px;
        padding-left:15px;
    }
    .notification-page-silver a.showNotif {
        display: block;
        background: red;
        padding: 0px 3px;
        font: normal 10px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: absolute;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        top: -5px;
        left: 15px;
        text-decoration: none;
    }
    .messages-silver {
        float:left;
        margin: 0 0px;
        position:relative;
        border-right: 1px solid #c9c8c5;
        padding: 2px 15px;
        width: 41px;
    }
    .messages-silver h2 {
        padding: 0;
        font: normal 14px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #4c4c4a;
        margin: 0px 0 0 0;
        float: left;
    }
    .messages-silver h6#messageNotif {
        margin: -3px 0 0 0px;
        padding: 0;
        font: normal 10px/12px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #fff;
        background: #e6420c;
        display: inline-block;
        height: 10px;
        width: 10px;
        right: 0;
        border-radius: 10px;
        text-align: center;
        position: absolute;
    }
    .messagesIcon {
        background:url(http://assets.kompas.com/data/2013/kompascom/images/mailicon.png) no-repeat;
        width:20px;
        height:14px;
        position: relative;
        float: left;
        margin-top: 3px;
        margin-left: 5px;
    }
    /* S : =================================== SUGGESTED ========================================= */
    .suggested-silver {
        padding: 20px 0px 20px 0px;
        width: 91%;
        position: relative;
        max-height: 400px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .suggestedIn-silver {
        border-top: solid 1px #c9c8c5;
    }
    .suggestedIn-silver h1 {
        margin:-10px 0 0 0;
        padding:0;
        font: normal 12px "OpenSansbold", Arial, Helvetica, sans-serif;
        color: #4c4c4a;
        background: #e0dfdb;
        width: 120px;
        display:block;
        margin-bottom: 15px;
    }
    .suggestedIn-silver li {
        margin: 0px 10px 5px 0;
        padding:0;
        font:normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        width: auto;
        display: block;
        overflow: hidden;
        border-bottom: 1px dashed #c9c8c5;
        padding-bottom: 5px;
    }
    .suggestedIn-silver li a {
        font: normal 12px "Opensanssemibold", Arial, Helvetica, sans-serif;
        color: #666;
        text-decoration:none;
        display: table-cell;
        vertical-align: middle;
        height: 34px;
        overflow: hidden;
    }
    .suggestedIn-silver li a:hover {
        text-decoration:underline;
    }
    /* E : =================================== SUGGESTED ========================================= */
    /* e : Personalisasi Silver */
    /* Personalisasi white */
    .mykompasIndex-white {
        width: 235px;
        height: 502px;
        float: left;
        margin-top: 20px;
        border: solid 1px #dedede;
        border-left: none;
        padding: 15px 0 0 20px;
        overflow: hidden;
    }
    .personalName-white {
        width:75%;
        height:43px;
        overflow:hidden;
        float:left;
        margin-left:5px;
    }
    .personalAkun-white {
        margin-bottom:10px;
    }
    .personalName-white h1 {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        margin:0;
        padding:0;
        height:16px;
        overflow:hidden;
    }
    .personalName-white h1 a {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        text-decoration:none;
    }
    .personalName-white h1 a:hover {
        text-decoration:underline;
    }
    .personalImg-white {
        width:31px;
        height:31px;
        overflow:hidden;
        float:left;
    }
    .personalImg-white img {
        width:31px;
        height:auto;
        overflow:hidden;
    }
    .personalPoin-white {
        float:left;
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #8e8e8b;
        width: auto;
        height:22px;
        overflow:hidden;
        border-right: 1px solid #c9c8c5;
        padding: 2px 10px 0 0;
    }
    .personalPoin-white span {
        font:13px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #4c4c4a;
        margin:0 5px;
    }
    .personalPoin-white span a {
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#aed6ef;
    }
    .notification-page-white {
        position: relative;
        float: left;
        z-index: 10;
        height:24px;
        padding-top:2px;
        padding-left:15px;
    }
    .notification-page-white a.showNotif {
        display: block;
        background: red;
        padding: 0px 3px;
        font: normal 10px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: absolute;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        top: -5px;
        left: 15px;
        text-decoration: none;
    }
    .messages-white {
        float:left;
        margin: 0 0px;
        position:relative;
        border-right: 1px solid #c9c8c5;
        padding: 2px 15px;
        width: 41px;
    }
    .messages-white h2 {
        padding: 0;
        font: normal 14px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #4c4c4a;
        margin: 0px 0 0 0;
        float: left;
    }
    .messages-white h6#messageNotif {
        margin: -3px 0 0 0px;
        padding: 0;
        font: normal 10px/12px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #fff;
        background: #e6420c;
        display: inline-block;
        height: 10px;
        width: 10px;
        right: 0;
        border-radius: 10px;
        text-align: center;
        position: absolute;
    }
    /* S : =================================== SUGGESTED ========================================= */
    .suggested-white {
        padding: 20px 0px 20px 0px;
        width: 91%;
        position: relative;
        max-height: 400px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .suggestedIn-white {
        border-top: solid 1px #c9c8c5;
    }
    .suggestedIn-white h1 {
        margin:-10px 0 0 0;
        padding:0;
        font: normal 12px "OpenSansbold", Arial, Helvetica, sans-serif;
        color: #4c4c4a;
        width: 120px;
        display:block;
        margin-bottom: 15px;
        background: #fff;
    }
    .suggestedIn-white li {
        margin: 0px 10px 5px 0;
        padding:0;
        font:normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        width: auto;
        display: block;
        overflow: hidden;
        border-bottom: 1px dashed #c9c8c5;
        padding-bottom: 5px;
    }
    .suggestedIn-white li a {
        font: normal 12px "Opensanssemibold", Arial, Helvetica, sans-serif;
        color: #666;
        text-decoration:none;
        display: table-cell;
        vertical-align: middle;
        height: 34px;
        overflow: hidden;
    }
    .suggestedIn-white li a:hover {
        text-decoration:underline;
    }
    /* E : =================================== SUGGESTED ========================================= */
    /* e : Personalisasi White */
    /* Personalisasi Orange */
    .mykompasIndex-orange {
        width: 235px;
        height: 502px;
        float: left;
        margin-top: 20px;
        border: solid 1px #dedede;
        border-left: none;
        padding: 15px 0 0 20px;
        overflow: hidden;
        background: rgb(241, 144, 5);
    }
    .personalName-orange {
        width:75%;
        height:43px;
        overflow:hidden;
        float:left;
        margin-left:5px;
    }
    .personalAkun-orange {
        margin-bottom:10px;
    }
    .personalName-orange h1 {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        margin:0;
        padding:0;
        height:16px;
        overflow:hidden;
    }
    .personalName-orange h1 a {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        text-decoration:none;
    }
    .personalName-orange h1 a:hover {
        text-decoration:underline;
    }
    .personalImg-orange {
        width:31px;
        height:31px;
        overflow:hidden;
        float:left;
    }
    .personalImg-orange img {
        width:31px;
        height:auto;
        overflow:hidden;
    }
    .personalPoin-orange {
        float:left;
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #f8f8f8;
        width: auto;
        height:22px;
        overflow:hidden;
        border-right: 1px solid rgb(191, 113, 1);
        padding: 2px 10px 0 0;
    }
    .personalPoin-orange span {
        font:13px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #ffffff;
        margin:0 5px;
    }
    .personalPoin-orange span a {
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#aed6ef;
    }
    .notification-page-orange {
        position: relative;
        float: left;
        z-index: 10;
        height:24px;
        padding-top:2px;
        padding-left:15px;
    }
    .notification-page-orange a.showNotif {
        display: block;
        background: red;
        padding: 0px 3px;
        font: normal 10px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: absolute;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        top: -5px;
        left: 15px;
        text-decoration: none;
    }
    .messages-orange {
        float:left;
        margin: 0 0px;
        position:relative;
        border-right: 1px solid rgb(191, 113, 1);
        padding: 2px 15px;
        width: 41px;
    }
    .messages-orange h2 {
        padding: 0;
        font: normal 14px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #ffffff;
        margin: 0px 0 0 0;
        float: left;
    }
    .messages-orange h6#messageNotif {
        margin: -3px 0 0 0px;
        padding: 0;
        font: normal 10px/12px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #fff;
        background: #e6420c;
        display: inline-block;
        height: 10px;
        width: 10px;
        right: 0;
        border-radius: 10px;
        text-align: center;
        position: absolute;
    }
    /* S : =================================== SUGGESTED ========================================= */
    .suggested-orange {
        padding: 20px 0px 20px 0px;
        width: 91%;
        position: relative;
        max-height: 400px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .suggestedIn-orange {
        border-top: solid 1px rgb(191, 113, 1);
    }
    .suggestedIn-orange h1 {
        margin:-10px 0 0 0;
        padding:0;
        font: normal 12px "OpenSansbold", Arial, Helvetica, sans-serif;
        color: #fff;
        width: 120px;
        display:block;
        margin-bottom: 15px;
        background: rgb(241, 144, 5);
    }
    .suggestedIn-orange li {
        margin: 0px 10px 5px 0;
        padding:0;
        font:normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        width: auto;
        display: block;
        overflow: hidden;
        border-bottom: 1px dashed rgb(191, 113, 1);
        padding-bottom: 5px;
    }
    .suggestedIn-orange li a {
        font: normal 12px "Opensanssemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration:none;
        display: table-cell;
        vertical-align: middle;
        height: 34px;
        overflow: hidden;
    }
    .suggestedIn-orange li a:hover {
        text-decoration:underline;
    }
    /* E : =================================== SUGGESTED ========================================= */
    /* e : Personalisasi Orange */
    /* Personalisasi Blue Sea */
    .mykompasIndex-blueSea {
        width: 235px;
        height: 502px;
        float: left;
        margin-top: 20px;
        border: solid 1px #dedede;
        border-left: none;
        padding: 15px 0 0 20px;
        overflow: hidden;
        background: rgb(112, 198, 215);
    }
    .personalName-blueSea {
        width:75%;
        height:43px;
        overflow:hidden;
        float:left;
        margin-left:5px;
    }
    .personalAkun-blueSea {
        margin-bottom:10px;
    }
    .personalName-blueSea h1 {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        margin:0;
        padding:0;
        height:16px;
        overflow:hidden;
    }
    .personalName-blueSea h1 a {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        text-decoration:none;
    }
    .personalName-blueSea h1 a:hover {
        text-decoration:underline;
    }
    .personalImg-blueSea {
        width:31px;
        height:31px;
        overflow:hidden;
        float:left;
    }
    .personalImg-blueSea img {
        width:31px;
        height:auto;
        overflow:hidden;
    }
    .personalPoin-blueSea {
        float:left;
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #f8f8f8;
        width: auto;
        height:22px;
        overflow:hidden;
        border-right: 1px solid rgb(3, 157, 187);
        padding: 2px 10px 0 0;
    }
    .personalPoin-blueSea span {
        font:13px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #ffffff;
        margin:0 5px;
    }
    .personalPoin-blueSea span a {
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#aed6ef;
    }
    .notification-page-blueSea {
        position: relative;
        float: left;
        z-index: 10;
        height:24px;
        padding-top:2px;
        padding-left:15px;
    }
    .notification-page-blueSea a.showNotif {
        display: block;
        background: red;
        padding: 0px 3px;
        font: normal 10px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: absolute;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        top: -5px;
        left: 15px;
        text-decoration: none;
    }
    .messages-blueSea {
        float:left;
        margin: 0 0px;
        position:relative;
        border-right: 1px solid rgb(3, 157, 187);
        padding: 2px 15px;
        width: 41px;
    }
    .messages-blueSea h2 {
        padding: 0;
        font: normal 14px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #ffffff;
        margin: 0px 0 0 0;
        float: left;
    }
    .messages-blueSea h6#messageNotif {
        margin: -3px 0 0 0px;
        padding: 0;
        font: normal 10px/12px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #fff;
        background: #e6420c;
        display: inline-block;
        height: 10px;
        width: 10px;
        right: 0;
        border-radius: 10px;
        text-align: center;
        position: absolute;
    }
    /* S : =================================== SUGGESTED ========================================= */
    .suggested-blueSea {
        padding: 20px 0px 20px 0px;
        width: 91%;
        position: relative;
        max-height: 400px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .suggestedIn-blueSea {
        border-top: solid 1px rgb(3, 157, 187);
    }
    .suggestedIn-blueSea h1 {
        margin:-10px 0 0 0;
        padding:0;
        font: normal 12px "OpenSansbold", Arial, Helvetica, sans-serif;
        color: #fff;
        width: 120px;
        display:block;
        margin-bottom: 15px;
        background: rgb(112, 198, 215);
    }
    .suggestedIn-blueSea li {
        margin: 0px 10px 5px 0;
        padding:0;
        font:normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        width: auto;
        display: block;
        overflow: hidden;
        border-bottom: 1px dashed rgb(3, 157, 187);
        padding-bottom: 5px;
    }
    .suggestedIn-blueSea li a {
        font: normal 12px "Opensanssemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration:none;
        display: table-cell;
        vertical-align: middle;
        height: 34px;
        overflow: hidden;
    }
    .suggestedIn-blueSea li a:hover {
        text-decoration:underline;
    }
    /* E : =================================== SUGGESTED ========================================= */
    /* e : Personalisasi Blue Sea */
    /* Personalisasi Blue */
    .mykompasIndex-blue {
        width: 235px;
        height: 502px;
        float: left;
        margin-top: 20px;
        border: solid 1px #dedede;
        border-left: none;
        padding: 15px 0 0 20px;
        overflow: hidden;
        background: rgb(55, 166, 222);
    }
    .personalName-blue {
        width:75%;
        height:43px;
        overflow:hidden;
        float:left;
        margin-left:5px;
    }
    .personalAkun-blue {
        margin-bottom:10px;
    }
    .personalName-blue h1 {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        margin:0;
        padding:0;
        height:16px;
        overflow:hidden;
    }
    .personalName-blue h1 a {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        text-decoration:none;
    }
    .personalName-blue h1 a:hover {
        text-decoration:underline;
    }
    .personalImg-blue {
        width:31px;
        height:31px;
        overflow:hidden;
        float:left;
    }
    .personalImg-blue img {
        width:31px;
        height:auto;
        overflow:hidden;
    }
    .personalPoin-blue {
        float:left;
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #f8f8f8;
        width: auto;
        height:22px;
        overflow:hidden;
        border-right: 1px solid rgb(192, 239, 248);
        padding: 2px 10px 0 0;
    }
    .personalPoin-blue span {
        font:13px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: rgb(192, 239, 248);
        margin:0 5px;
    }
    .personalPoin-blueSea span a {
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#aed6ef;
    }
    .notification-page-blue {
        position: relative;
        float: left;
        z-index: 10;
        height:24px;
        padding-top:2px;
        padding-left:15px;
    }
    .notification-page-blue a.showNotif {
        display: block;
        background: red;
        padding: 0px 3px;
        font: normal 10px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: absolute;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        top: -5px;
        left: 15px;
        text-decoration: none;
    }
    .messages-blue {
        float:left;
        margin: 0 0px;
        position:relative;
        border-right: 1px solid rgb(192, 239, 248);
        padding: 2px 15px;
        width: 41px;
    }
    .messages-blue h2 {
        padding: 0;
        font: normal 14px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: rgb(192, 239, 248);
        margin: 0px 0 0 0;
        float: left;
    }
    .messages-blue h6#messageNotif {
        margin: -3px 0 0 0px;
        padding: 0;
        font: normal 10px/12px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #fff;
        background: #e6420c;
        display: inline-block;
        height: 10px;
        width: 10px;
        right: 0;
        border-radius: 10px;
        text-align: center;
        position: absolute;
    }
    /* S : =================================== SUGGESTED ========================================= */
    .suggested-blue {
        padding: 20px 0px 20px 0px;
        width: 91%;
        position: relative;
        max-height: 400px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .suggestedIn-blue {
        border-top: solid 1px rgb(192, 239, 248);
    }
    .suggestedIn-blue h1 {
        margin:-10px 0 0 0;
        padding:0;
        font: normal 12px "OpenSansbold", Arial, Helvetica, sans-serif;
        color: rgb(192, 239, 248);
        width: 120px;
        display:block;
        margin-bottom: 15px;
        background: rgb(55, 166, 222);
    }
    .suggestedIn-blue li {
        margin: 0px 10px 5px 0;
        padding:0;
        font:normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        width: auto;
        display: block;
        overflow: hidden;
        border-bottom: 1px dashed rgb(192, 239, 248);
        padding-bottom: 5px;
    }
    .suggestedIn-blue li a {
        font: normal 12px "Opensanssemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration:none;
        display: table-cell;
        vertical-align: middle;
        height: 34px;
        overflow: hidden;
    }
    .suggestedIn-blue li a:hover {
        text-decoration:underline;
    }
    /* E : =================================== SUGGESTED ========================================= */
    /* e : Personalisasi Blue */
    /* Personalisasi Green */
    .mykompasIndex-green {
        width: 235px;
        height: 502px;
        float: left;
        margin-top: 20px;
        border: solid 1px #dedede;
        border-left: none;
        padding: 15px 0 0 20px;
        overflow: hidden;
        background: rgb(27, 182, 116);
    }
    .personalName-green {
        width:75%;
        height:43px;
        overflow:hidden;
        float:left;
        margin-left:5px;
    }
    .personalAkun-green {
        margin-bottom:10px;
    }
    .personalName-green h1 {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        margin:0;
        padding:0;
        height:16px;
        overflow:hidden;
    }
    .personalName-green h1 a {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        text-decoration:none;
    }
    .personalName-green h1 a:hover {
        text-decoration:underline;
    }
    .personalImg-green {
        width:31px;
        height:31px;
        overflow:hidden;
        float:left;
    }
    .personalImg-green img {
        width:31px;
        height:auto;
        overflow:hidden;
    }
    .personalPoin-green {
        float:left;
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #f8f8f8;
        width: auto;
        height:22px;
        overflow:hidden;
        border-right: 1px solid rgb(23, 151, 96);
        padding: 2px 10px 0 0;
    }
    .personalPoin-green span {
        font:13px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: rgb(199, 251, 229);
        margin:0 5px;
    }
    .personalPoin-green span a {
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#aed6ef;
    }
    .notification-page-green {
        position: relative;
        float: left;
        z-index: 10;
        height:24px;
        padding-top:2px;
        padding-left:15px;
    }
    .notification-page-green a.showNotif {
        display: block;
        background: red;
        padding: 0px 3px;
        font: normal 10px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: absolute;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        top: -5px;
        left: 15px;
        text-decoration: none;
    }
    .messages-green {
        float:left;
        margin: 0 0px;
        position:relative;
        border-right: 1px solid rgb(23, 151, 96);
        padding: 2px 15px;
        width: 41px;
    }
    .messages-green h2 {
        padding: 0;
        font: normal 14px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: rgb(199, 251, 229);
        margin: 0px 0 0 0;
        float: left;
    }
    .messages-green h6#messageNotif {
        margin: -3px 0 0 0px;
        padding: 0;
        font: normal 10px/12px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #fff;
        background: #e6420c;
        display: inline-block;
        height: 10px;
        width: 10px;
        right: 0;
        border-radius: 10px;
        text-align: center;
        position: absolute;
    }
    /* S : =================================== SUGGESTED ========================================= */
    .suggested-green {
        padding: 20px 0px 20px 0px;
        width: 91%;
        position: relative;
        max-height: 400px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .suggestedIn-green {
        border-top: solid 1px rgb(23, 151, 96);
    }
    .suggestedIn-green h1 {
        margin:-10px 0 0 0;
        padding:0;
        font: normal 12px "OpenSansbold", Arial, Helvetica, sans-serif;
        color: rgb(199, 251, 229);
        width: 120px;
        display:block;
        margin-bottom: 15px;
        background: rgb(27, 182, 116);
    }
    .suggestedIn-green li {
        margin: 0px 10px 5px 0;
        padding:0;
        font:normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        width: auto;
        display: block;
        overflow: hidden;
        border-bottom: 1px dashed rgb(23, 151, 96);
        padding-bottom: 5px;
    }
    .suggestedIn-green li a {
        font: normal 12px "Opensanssemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration:none;
        display: table-cell;
        vertical-align: middle;
        height: 34px;
        overflow: hidden;
    }
    .suggestedIn-green li a:hover {
        text-decoration:underline;
    }
    /* E : =================================== SUGGESTED ========================================= */
    /* e : Personalisasi Green */
    /* Personalisasi Green Light */
    .mykompasIndex-greenLight {
        width: 235px;
        height: 502px;
        float: left;
        margin-top: 20px;
        border: solid 1px #dedede;
        border-left: none;
        padding: 15px 0 0 20px;
        overflow: hidden;
        background: rgb(184, 206, 1);
    }
    .personalName-greenLight {
        width:75%;
        height:43px;
        overflow:hidden;
        float:left;
        margin-left:5px;
    }
    .personalAkun-greenLight {
        margin-bottom:10px;
    }
    .personalName-greenLight h1 {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        margin:0;
        padding:0;
        height:16px;
        overflow:hidden;
    }
    .personalName-greenLight h1 a {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        text-decoration:none;
    }
    .personalName-greenLight h1 a:hover {
        text-decoration:underline;
    }
    .personalImg-greenLight {
        width:31px;
        height:31px;
        overflow:hidden;
        float:left;
    }
    .personalImg-greenLight img {
        width:31px;
        height:auto;
        overflow:hidden;
    }
    .personalPoin-greenLight {
        float:left;
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #f8f8f8;
        width: auto;
        height:22px;
        overflow:hidden;
        border-right: 1px solid rgb(148, 166, 3);
        padding: 2px 10px 0 0;
    }
    .personalPoin-greenLight span {
        font:13px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: rgb(245, 251, 196);
        margin:0 5px;
    }
    .personalPoin-greenLight span a {
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#aed6ef;
    }
    .notification-page-greenLight {
        position: relative;
        float: left;
        z-index: 10;
        height:24px;
        padding-top:2px;
        padding-left:15px;
    }
    .notification-page-greenLight a.showNotif {
        display: block;
        background: red;
        padding: 0px 3px;
        font: normal 10px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: absolute;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        top: -5px;
        left: 15px;
        text-decoration: none;
    }
    .messages-greenLight {
        float:left;
        margin: 0 0px;
        position:relative;
        border-right: 1px solid rgb(148, 166, 3);
        padding: 2px 15px;
        width: 41px;
    }
    .messages-greenLight h2 {
        padding: 0;
        font: normal 14px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: rgb(245, 251, 196);
        margin: 0px 0 0 0;
        float: left;
    }
    .messages-greenLight h6#messageNotif {
        margin: -3px 0 0 0px;
        padding: 0;
        font: normal 10px/12px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: #fff;
        background: #e6420c;
        display: inline-block;
        height: 10px;
        width: 10px;
        right: 0;
        border-radius: 10px;
        text-align: center;
        position: absolute;
    }
    /* S : =================================== SUGGESTED ========================================= */
    .suggested-greenLight {
        padding: 20px 0px 20px 0px;
        width: 91%;
        position: relative;
        max-height: 400px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .suggestedIn-greenLight {
        border-top: solid 1px rgb(148, 166, 3);
    }
    .suggestedIn-greenLight h1 {
        margin:-10px 0 0 0;
        padding:0;
        font: normal 12px "OpenSansbold", Arial, Helvetica, sans-serif;
        color: rgb(245, 251, 196);
        width: 120px;
        display:block;
        margin-bottom: 15px;
        background: rgb(184, 206, 1);
    }
    .suggestedIn-greenLight li {
        margin: 0px 10px 5px 0;
        padding:0;
        font:normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        width: auto;
        display: block;
        overflow: hidden;
        border-bottom: 1px dashed rgb(148, 166, 3);
        padding-bottom: 5px;
    }
    .suggestedIn-greenLight li a {
        font: normal 12px "Opensanssemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration:none;
        display: table-cell;
        vertical-align: middle;
        height: 34px;
        overflow: hidden;
    }
    .suggestedIn-greenLight li a:hover {
        text-decoration:underline;
    }
    /* E : =================================== SUGGESTED ========================================= */
    /* e : Personalisasi Green light */
    /* Personalisasi maroon */
    .mykompasIndex-maroon {
        width: 235px;
        height: 502px;
        float: left;
        margin-top: 20px;
        border: solid 1px #dedede;
        border-left: none;
        padding: 15px 0 0 20px;
        overflow: hidden;
        background: rgb(231, 79, 29);
    }
    .personalName-maroon {
        width:75%;
        height:43px;
        overflow:hidden;
        float:left;
        margin-left:5px;
    }
    .personalAkun-maroon {
        margin-bottom:10px;
    }
    .personalName-maroon h1 {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        margin:0;
        padding:0;
        height:16px;
        overflow:hidden;
    }
    .personalName-maroon h1 a {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#fff;
        text-decoration:none;
    }
    .personalName-maroon h1 a:hover {
        text-decoration:underline;
    }
    .personalImg-maroon {
        width:31px;
        height:31px;
        overflow:hidden;
        float:left;
    }
    .personalImg-maroon img {
        width:31px;
        height:auto;
        overflow:hidden;
    }
    .personalPoin-maroon {
        float:left;
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #f8f8f8;
        width: auto;
        height:22px;
        overflow:hidden;
        border-right: 1px solid rgb(170, 58, 21);
        padding: 2px 10px 0 0;
    }
    .personalPoin-maroon span {
        font:13px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: rgb(252, 231, 224);
        margin:0 5px;
    }
    .personalPoin-maroon span a {
        font:12px normal"opensansBold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#aed6ef;
    }
    .notification-page-maroon {
        position: relative;
        float: left;
        z-index: 10;
        height:24px;
        padding-top:2px;
        padding-left:15px;
    }
    .notification-page-maroon a.showNotif {
        display: block;
        background: red;
        padding: 0px 3px;
        font: normal 10px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        color: #fff;
        position: absolute;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        top: -5px;
        left: 15px;
        text-decoration: none;
    }
    .messages-maroon {
        float:left;
        margin: 0 0px;
        position:relative;
        border-right: 1px solid rgb(170, 58, 21);
        padding: 2px 15px;
        width: 41px;
    }
    .messages-maroon h2 {
        padding: 0;
        font: normal 14px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: rgb(252, 231, 224);
        margin: 0px 0 0 0;
        float: left;
    }
    .messages-maroon h6#messageNotif {
        margin: -3px 0 0 0px;
        padding: 0;
        font: normal 10px/12px "OpenSansBold", Arial, Helvetica, sans-serif;
        color: red;
        background: #fff;
        display: inline-block;
        height: 10px;
        width: 10px;
        right: 0;
        border-radius: 10px;
        text-align: center;
        position: absolute;
    }
    /* S : =================================== SUGGESTED ========================================= */
    .suggested-maroon {
        padding: 20px 0px 20px 0px;
        width: 91%;
        position: relative;
        max-height: 400px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .suggestedIn-maroon {
        border-top: solid 1px rgb(170, 58, 21);
    }
    .suggestedIn-maroon h1 {
        margin:-10px 0 0 0;
        padding:0;
        font: normal 12px "OpenSansbold", Arial, Helvetica, sans-serif;
        color: rgb(252, 231, 224);
        width: 120px;
        display:block;
        margin-bottom: 15px;
        background: rgb(231, 79, 29);
    }
    .suggestedIn-maroon li {
        margin: 0px 10px 5px 0;
        padding:0;
        font:normal 12px "OpenSansSemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        width: auto;
        display: block;
        overflow: hidden;
        border-bottom: 1px dashed rgb(170, 58, 21);
        padding-bottom: 5px;
    }
    .suggestedIn-maroon li a {
        font: normal 12px "Opensanssemibold", Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration:none;
        display: table-cell;
        vertical-align: middle;
        height: 34px;
        overflow: hidden;
    }
    .suggestedIn-maroon li a:hover {
        text-decoration:underline;
    }
    /* E : =================================== SUGGESTED ========================================= */
    /* e : Personalisasi Maroon */
    /* tooltip styling */
    #tooltipRegister {
        height:auto;
        overflow:hidden;
        width:auto;
        cursor:pointer;
        color:#000;
    }
    .tooltip {
        display:none;
        height:auto;
        width:200px;
        font-size:11px;
        position:absolute;
        z-index:999;
    }
    .tooltipIn {
        -webkit-box-shadow: 0px 0px 3px 3px rgba(125, 125, 125, 0.1);
        box-shadow: 0px 0px 3px 3px rgba(125, 125, 125, 0.1);
        font:normal 12px "opensansSemibold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#000;
        background:#e1e1e1;
        border:1px solid #929292;
        padding:10px 20px;
        margin-top:-1px;
        text-shadow: 0px 1px 1px #ffffff;
    }
    /* artikel box */
    #topcorner {
        width:15px;
        height:70px;
        background-color: #37a6db;
        z-index: 10;
        position: fixed;
        right: 0;
        bottom: 4.3em;
        -webkit-box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.1);
        box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.1);
        border-top: 1px solid #aae3fe;
        border-left: 1px solid #aae3fe;
        border-bottom: 1px solid #aae3fe;
    }
    #topcorner .buka {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/open-box.gif) no-repeat scroll 0 0 transparent;
        height: 13px;
        margin-left: 5px;
        margin-top: 29px;
        width: 13px;
        text-indent: -99999px;
        display:block;
    }
    #topcorner .buka:hover {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/open-box-hover.gif) no-repeat scroll transparent;
    }
    #artbox {
        display:none;
        width: 320px;
        height: auto;
        background-color: #37a6db;
        position:fixed;
        bottom:4.3em;
        right:0;
        -webkit-box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.1);
        box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.1);
        padding: 2px 0 2px 2px;
        z-index:5;
    }
    #artbox .kompasartbox {
        width:300px;
        color: #aae3fe;
        font:normal 15px "opensansSemibold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        padding: 0px;
        margin-bottom: 15px;
    }
    #artbox .listing {
        padding:0;
        margin:0;
    }
    #artbox .tutup {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/close-box.gif) no-repeat;
        margin: 0em 0em 0em 0.3em;
        float: right;
        height: 20px;
        width: 20px;
        text-indent: -99999px;
        display: block;
    }
    #artbox .tutup:hover {
        background:url(http://assets.kompas.com/data/2013/kompascom/images/artikel/close-box.gif) 0px 0px transparent no-repeat;
    }
    #artbox .toTop {
        background:url(http://assets.kompas.com/data/2013/kompascom/images/artikel/minim-box.gif) no-repeat;
        margin: 0em 0em 0em 0.3em;
        float: right;
        height: 20px;
        width: 20px;
        text-indent: -99999px;
        display: none;
    }
    #artbox .toTop:hover {
        background:url(http://assets.kompas.com/data/2013/kompascom/images/artikel/minim-box.gif) transparent no-repeat;
    }
    #artbox .blackword {
        font-family:Arial, Helvetica, sans-serif;
        font-size:15px;
        height: 20px;
        overflow: hidden;
    }
    #artbox .blackword a {
        font:normal 14px "opensansRegular", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #fff;
        text-decoration: none;
        height: 40px;
        overflow: hidden;
        display: block;
    }
    #artbox .blackword a:hover {
        color : #fff;
        text-decoration: underline;
    }
    #artbox .pic img {
        float:left;
        padding-left: 0px;
        padding-right: 10px;
        height: 55px;
        width: 105px;
        padding-bottom:10px;
    }
    #artbox hr {
        margin : 8px 0;
    }
    #artbox .sharefbtwit {
        float:left;
        padding-right: 5px;
    }
    .ads_artbox01 {
        width:300px;
        height:100px;
        margin-top:10px;
        overflow:hidden;
    }
    .ads_artbox02 {
        width:300px;
        height:85px;
        margin-top:15px;
        padding-top:10px;
        overflow:hidden;
        border-top:solid 1px #ededed;
    }
    .ads_artbox02 .spc {
        font:bold 11px Arial, Helvetica, sans-serif;
        color:#fd8838;
        padding-bottom:5px;
    }
    .ads_artbox02 .isi a {
        font:normal 14px Arial, Helvetica, sans-serif;
        color:#333333;
        text-decoration:none;
    }
    .ads_artbox02 .isi a:hover {
        text-decoration:underline;
    }
    .borderBlue {
        border:1px solid #aae3fe;
        padding: 10px;
        border-right: none;
    }
    /* e : artikel box */
    /* artikel box breaking news */
    #topcornerBreaking {
        width:15px;
        height:70px;
        background-color: #e7511d;
        z-index: 10;
        position: fixed;
        right: 0;
        bottom: 4.3em;
        -webkit-box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.1);
        box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.1);
        border-top: 1px solid #cd3906;
        border-left: 1px solid #cd3906;
        border-bottom: 1px solid #cd3906;
    }
    #topcornerBreaking .buka {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/open-box-breaking.gif) no-repeat scroll 0 0 transparent;
        height: 13px;
        margin-left: 5px;
        margin-top: 29px;
        width: 13px;
        text-indent: -99999px;
        display:block;
    }
    #topcornerBreaking .buka:hover {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/close-box-breaking-hover.gif) no-repeat scroll transparent;
    }
    #artboxBreaking {
        display:none;
        width: 320px;
        height: auto;
        background-color: #e7511d;
        position:fixed;
        bottom:4.3em;
        right:0;
        -webkit-box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.1);
        box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.1);
        padding: 2px 0 2px 2px;
        z-index:5;
    }
    #artboxBreaking .kompasartbox {
        width:300px;
        color: #ffa04c;
        font:normal 15px "opensansSemibold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        padding: 0px;
        margin-bottom: 15px;
    }
    #artboxBreaking .listing {
        padding:0;
        margin:0;
    }
    #artboxBreaking .tutup {
        background: url(http://assets.kompas.com/data/2013/kompascom/images/artikel/close-box-breaking.gif) no-repeat;
        margin: 0em 0em 0em 0.3em;
        float: right;
        height: 20px;
        width: 20px;
        text-indent: -99999px;
        display: block;
    }
    #artboxBreaking .tutup:hover {
        background:url(http://assets.kompas.com/data/2013/kompascom/images/artikel/close-box-breaking.gif) 0px 0px transparent no-repeat;
    }
    #artboxBreaking .toTop {
        background:url(http://assets.kompas.com/data/2013/kompascom/images/artikel/minim-box-breaking.gif) no-repeat;
        margin: 0em 0em 0em 0.3em;
        float: right;
        height: 20px;
        width: 20px;
        text-indent: -99999px;
        display: none;
    }
    #artboxBreaking .toTop:hover {
        background:url(http://assets.kompas.com/data/2013/kompascom/images/artikel/minim-box-breaking.gif) transparent no-repeat;
    }
    #artboxBreaking .blackword {
        font-family:Arial, Helvetica, sans-serif;
        font-size:15px;
        height: 20px;
        overflow: hidden;
    }
    #artboxBreaking .blackword a {
        font:normal 14px "opensansRegular", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #fff;
        text-decoration: none;
        height: 40px;
        overflow: hidden;
        display: block;
        margin-bottom: 10px;
    }
    #artboxBreaking .blackword a:hover {
        color : #fff;
        text-decoration: underline;
    }
    #artboxBreaking .pic img {
        float:left;
        padding-left: 0px;
        padding-right: 10px;
        height: 55px;
        width: 105px;
        padding-bottom:10px;
    }
    #artboxBreaking hr {
        margin : 8px 0;
    }
    #artboxBreaking .sharefbtwit {
        float:left;
        padding-right: 5px;
    }
    .borderOrange {
        border: 1px solid #cd3906;
        padding: 10px;
        border-right: none;
    }
    /* e : artikel box breakingNews */
    /* S : About Us */
    h1.aboutUs {
        font:normal 30px "opensansSemibold", lucida;
        color:#000;
        margin:10px 0 10px 0;
        padding-bottom:15px;
        padding-left:0.6%;
    }
    .aboutNavWrap {
        width: 25%;
        float:left;
    }
    .aboutNav {
        width:98%;
        height:auto;
        overflow:hidden;
        padding: 0 0.6%;
    }
    ul.aboutNav {
        list-style:none;
        margin:0;
    }
    ul.aboutNav li {
        float:left;
        font:normal 14px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#666;
        width:80%;
    }
    ul.aboutNav li.titleTabs {
        float:left;
        font:normal 24px "opensansSemibold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#000;
        padding: 15px 25px 15px 0px;
        border-right:1px solid #e8e8e8;
    }
    ul.aboutNav li a {
        font:normal 18px "opensansSemibold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#d2d2d2;
        text-decoration:none;
        padding: 10px 35px 10px 25px;
        display:block;
    }
    ul.aboutNav li a:hover {
        color:#000;
    }
    ul.aboutNav li a.current {
        color:#000;
        background:url(http://assets.kompas.com/data/2013/kompascom/images/acc-up.gif) left center no-repeat;
        padding-right: 36px;
        width:80%;
    }
    .aboutContent {
        padding: 0% 0.5%;
        width:65%;
        float:left;
        font:normal 16px/26px "Lucida Grande","Lucida Sans Unicode", sans-serif;
    }
    .aboutContent h1 {
        font: normal 24px "opensansSemibold", lucida;
        margin:10px 0 20px 0;
        color:#000;
    }
    .aboutContent h2 {
        font: normal 18px "opensansSemibold", lucida;
        margin:0 0 5px 0;
        color:#000;
    }
    .aboutContent p {
        font:normal 16px/26px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        padding:0 0 30px 0;
        margin:0;
        color: #666;
    }
    .aboutContent h4 {
        font:normal 13px/16px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        padding:0 0 30px 0;
        margin:0;
        padding-bottom:30px;
        color: #999;
    }
    .aboutContent a {
        text-decoration:none;
        color:#37a6dc;
    }
    .aboutContentRight {
        float:right;
        width:300px;
        margin-top: 1%;
    }
    .aboutContent ul {
        margin-left: 0px;
        font:normal 16px "Lucida Grande","Lucida Sans Unicode", sans-serif;
    }
    .aboutContent ol {
        margin-left:34px;
        margin-top:0px;
        margin-bottom:30px;
        font:normal 16px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#666;
    }
    .aboutContent input {
        background: #fff;
        padding: 8px;
        border: 1px solid #ebebeb;
        border-bottom-color: #c9c9c9;
        border-right-color: #c9c9c9;
        font-size: 1em;
        color: #272727;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        display: block;
        width:90%;
        outline:none;
        color:#999;
    }
    .aboutContent textarea {
        background: #fff;
        padding: 8px;
        border: 1px solid #ebebeb;
        border-bottom-color: #c9c9c9;
        border-right-color: #c9c9c9;
        font-size: 1em;
        color: #272727;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        display: block;
        width:95.5%;
        height:200px;
        outline:none;
        color:#999;
        resize:none;
    }
    .aboutContent select {
        background: #f8f8f8 url(http://assets.kompas.com/data/2013/kompascom/images/arrowList.gif) right center no-repeat;
        padding: 8px;
        border: 1px solid #ebebeb;
        border-bottom-color: #c9c9c9;
        border-right-color: #c9c9c9;
        font-size: 1em;
        color: #272727;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        display: block;
        width:95%;
        outline:none;
        color:#999;
        -webkit-appearance:none;
    }
    .aboutContentButton {
        padding:5px 15px;
        background:#37a6de;
        border:1px solid #000;
        color:#fff;
    }
    .aboutContentButton:hover {
        background:#2c85b2;
    }
    /* about content tabing */
    .aboutContentTabs {
        padding: 0% 0.5%;
        width:74%;
        float:left;
        font:normal 16px/26px "Lucida Grande","Lucida Sans Unicode", sans-serif;
    }
    .aboutContentTabs h1 {
        font: normal 24px "opensansSemibold", lucida;
        margin:10px 0 20px 0;
        color:#000;
    }
    .aboutContentTabs h2 {
        font: normal 18px "opensansSemibold", lucida;
        margin:0 0 5px 0;
        color:#000;
    }
    .aboutContentTabs p {
        font:normal 16px/26px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        padding:0 0 30px 0;
        margin:0;
        color: #666;
    }
    .aboutContentTabs h4 {
        font:normal 13px/16px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        padding:0 0 30px 0;
        margin:0;
        padding-bottom:30px;
        color: #999;
    }
    .aboutContentTabs a {
        text-decoration:none;
        color:#37a6dc;
    }
    .aboutContentTabs ul {
        margin-left: 0px;
        font:normal 16px "Lucida Grande","Lucida Sans Unicode", sans-serif;
    }
    .aboutContentTabs ol {
        margin-left:34px;
        margin-top:0px;
        margin-bottom:30px;
        font:normal 16px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#666;
    }
    .aboutContentTabs input {
        background: #fff;
        padding: 8px;
        border: 1px solid #ebebeb;
        border-bottom-color: #c9c9c9;
        border-right-color: #c9c9c9;
        font-size: 1em;
        color: #272727;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        display: block;
        width:90%;
        outline:none;
        color:#999;
    }
    .aboutContentTabs textarea {
        background: #fff;
        padding: 8px;
        border: 1px solid #ebebeb;
        border-bottom-color: #c9c9c9;
        border-right-color: #c9c9c9;
        font-size: 1em;
        color: #272727;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        display: block;
        width:95.5%;
        height:200px;
        outline:none;
        color:#999;
        resize:none;
    }
    .aboutContentTabs select {
        background: #f8f8f8 url(http://assets.kompas.com/data/2013/kompascom/images/arrowList.gif) right center no-repeat;
        padding: 8px;
        border: 1px solid #ebebeb;
        border-bottom-color: #c9c9c9;
        border-right-color: #c9c9c9;
        font-size: 1em;
        color: #272727;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        display: block;
        width:95%;
        outline:none;
        color:#999;
        -webkit-appearance:none;
    }
    .identityLeft1 {
        width:67%;
        float:left;
    }
    .identityLeft2 {
        width: 44%;
        border-right: 1px solid #ccc;
        float: left;
        padding-right: 2%;
        margin-right: 3%;
    }
    .identityRight1 {
        width:200px;
        float:right;
        margin-top:40px;
    }
    .identityRight1 img {
        margin:0 auto 10px;
    }
    .identity3Col {
        width:29%;
        float: left;
        padding-right: 2%;
        border-right:1px solid #ccc;
        margin-right: 2%;
    }
    .aboutContentTabs h3 {
        font: normal 15px "opensansSemibold", lucida;
        margin:0 0 5px 0;
        color:#000;
    }
    /* End About Content tabs */
    .boxContact {
        width:268px;
        border:1px solid #f3f3f3;
        padding:15px;
    }
    .boxContact h4 {
        margin:0 0 5px;
    }
    .boxContact p {
        margin:0 0 15px;
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
    }
    .boxContact p a {
        font:normal 13px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#2c85b2;
        text-decoration:none;
    }
    /* search */
    .searchDetail {
        background:#efefef;
        padding:30px 0;
        margin-top:-10px;
        border-bottom:1px solid #dfdfdf;
        margin-bottom:10px;
    }
    .searchDetailBox {
        width:50%;
        margin:0 0 0px 250px;
    }
    .searchDetailBox h2 {
        font:normal 12px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#37a6dc;
        padding:0;
        margin:0 0 5px 0;
    }
    .searchDetail input {
        width:70%;
        height:21px;
        float:left;
        border:1px solid #cbcbcb;
        outline:none;
    }
    .searchDetailButton {
        width:15%;
        padding:2px 1%;
        background:#e6e6e6;
        border:1px solid #cbcbcb;
        border-left:none;
        font:normal 12px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#000;
        height:45px;
    }
    .searchDetailButton:hover {
        background:#ddd;
    }
    .fontBold {
        font-weight:bold;
    }
    .imgVideo img {
        float: left;
        width: 150px;
        height: 75px;
        padding-right: 20px;
    }
    .boxSearchText {
        width: 80%;
        float: left;
    }
    .boxTextVideo {
        width: 75%;
        float: left;
    }
    /* info grafis */
    .infoGrafis {
        width:auto;
    }
    .infoGrafis h1 {
        margin:5px 0 5px 0;
        font:normal 36px/36px "opensansSemibold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#000;
        border-bottom:1px solid #e5e5e5;
        padding-bottom:20px;
    }
    .infoGrafisBoxWrapper {
        width:366px;
        float:left;
        margin-bottom:15px;
    }
    .infoGrafisBox {
        width:343px;
        height:355px;
        float:left;
        -webkit-box-shadow: 5px 6px 0px 1px rgba(229, 229, 229, 1);
        box-shadow: 5px 6px 0px 1px rgba(229, 229, 229, 1);
        border:1px solid #e5e5e5;
        margin-bottom:2%;
    }
    .infoGrafisBox img {
        width:100%;
        height:176px;
        overflow:hidden;
        margin-bottom:20px;
    }
    .infoGrafisBox h1 {
        padding:0 20px;
        margin:0 0 5px 0;
        font:normal 22px/22px "opensansSemibold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#000;
        max-height:44px;
        border-bottom:none;
        overflow:hidden;
    }
    .infoGrafisBox h1 a {
        text-decoration:none;
        color:#000;
    }
    .infoGrafisBox h1 a:hover {
        text-decoration:underline;
    }
    .infoGrafisBox h2 {
        padding:0 20px;
        margin:0 0 5px 0;
        font:normal 12px "opensansRegular", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#e55827;
    }
    .infoGrafisBox p {
        padding:0 20px;
        margin:0 0 5px 0;
        font:normal 12px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#5b5a5a;
        height:72px;
        overflow:hidden;
    }
    .ml20 {
        margin-left:2%;
    }
    .infoGrafisDetail {
    }
    .infoGrafisDetail h1 {
        border-bottom:none;
        padding:0;
        margin:10px 0;
        font-size:28px;
    }
    .infoGrafisDetail ul {
        list-style: none;
        color: #999;
        margin: 0px 0 10px;
        padding: 0;
        font-size: 12px;
    }
    .infoGrafisDetail li {
        float: left;
        padding: 0 10px;
        border-right: 1px solid #e7e7e7;
    }
    .infoGrafisDetail li:first-child {
        float: left;
        padding: 0 5px 0 0px;
        border-right: 1px solid #e7e7e7;
    }
    .infoGrafisKiri {
        width:68.3%;
        float:left;
    }
    .infoGrafisImg img {
        width:100%;
        height:550px;
        overflow:hidden;
        margin:20px 0 30px 0;
    }
    .infoGrafisKolomKiri {
        width:70%;
        float:left;
    }
    .infoGrafisKolomKiri p {
        font: normal 16px/26px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color: #333;
        padding: 0px 0 30px;
        margin: 0;
    }
    .infoGrafisKolomKanan {
        width:300px;
        float:right;
    }
    .titleInfoGrafis {
        font:normal 24px "opensansBold", lucida;
        color:#000;
        padding-bottom:8px;
        border-bottom:3px solid #e84f1d;
    }
    /* noImgBox */
    .noImgBox {
        padding: 50px 27px;
        width:236px;
        height: 190px;
        border: 1px solid #d8d8d8;
    }
    .noImgBox h1 {
        font:normal 24px/30px "opensansSemibold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        margin: 0 0 10px 0;
        max-height: 93px;
        overflow: hidden;
    }
    .noImgBox h1 a {
        font:normal 24px/30px "opensansSemibold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        text-decoration: none;
        color: #000;
    }
    .noImgBox h1 a:hover {
        text-decoration: underline;
    }
    .noImgBox p {
        font:normal 14px/18px "opensansSemibold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        margin: 0 0 5px 0;
        height: 108px;
        overflow: hidden;
    }
    /* sitemap */
    .sitemap {
        margin:20px;
    }
    .sitemap ul {
        font:normal 14px "opensansSemibold", "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#666;
        margin-left:20px;
        list-style:none;
    }
    .sitemap ul li a {
        text-decoration:none;
        color:#000;
        list-style:none;
    }
    .sitemap ul li ul a {
        text-decoration:none;
        color:#999;
    }
    .sitemap ul li a:hover {
        color:#000;
    }
    .sitemap ul li ul {
        margin-left:30px;
        list-style:circle;
    }
    /*    s : rss */
    .pageRss h1 {
        font: normal 30px "OpensansSemibold", Arial, Helvetica, sans-serif;
        color:#000;
    }
    .pageRss p {
        font:normal 16px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#000;
    }
    .pageRss p.termRss {
        font:normal 14px "Lucida Grande","Lucida Sans Unicode", sans-serif;
        color:#000;
    }
    .listRssLeft, .listRssRight {
        float:left;
    }
    .listRssLeft ul {
        margin:0;
        padding:0;
        width:260px;
    }
    .listRssRight ul {
        margin:0;
        padding:0;
        width:300px;
    }
    .listRssLeft ul li, .listRssRight ul li {
        list-style-type:none;
        position:relative;
    }
    .listRssLeft {
        border-right:solid 1px #ccc;
    }
    .listRssLeft ul li a {
        list-style-type:none;
        font: normal 16px "OpensansSemibold", Arial, Helvetica, sans-serif;
        color:#e0e0e0;
        text-decoration:none;
        display:block;
        padding:5px 0;
        background:url(http://assets.kompas.com/data/2013/kompascom/images/bulletRss.jpg) no-repeat left;
        padding-left:20px;
        margin-left:20px;
    }
    .listRssLeft ul li a.topListRssLeft {
        background:none;
        margin-left:-20px;
        color:#000;
    }
    .listRssLeft ul li a:hover {
        color:#333;
        background:#f2f2f2;
    }
    .listRssLeft ul li a.current {
        color:#000;
        background:#f2f2f2;
    }
    .listRssLeft ul li span.arrowRss {
        background:#f00;
        width:7px;
        height:13px;
        display:none;
    }
    .listRssLeft ul li a.current > .arrowRss {
        background:#f00;
        width:7px;
        height:13px;
        display:block;
    }
    .listRssRight ul li {
        list-style-type:none;
        font: normal 16px "OpensansSemibold", Arial, Helvetica, sans-serif;
        color:#000;
        text-decoration:none;
        padding:3px 0;
        padding-left:20px;
        margin-left:20px;
    }
    .listRssRight ul li:first-child {
        padding-top:5px;
    }
    .listRssRight ul li span a img {
        padding-right:10px;
    }
    .arrowRss {
        position:absolute;
        right:-7px;
        top:10px;
    }
    /*
    .dnoneRss {
        display:none;
    }
*/
    /*    e : rss */
    /* S : SKINAD */
    .boxSkinAd {
        display:none;
    }
    #wrap-skin {
        width:auto;
        margin:0 auto;
    }
    /* E : SKINAD */
    /*    s : page not found */
    .pageNotFound {
        width:923px;
        margin:0 auto;
        padding-top:40px;
    }
    .pageNotFound h1 {
        text-align:center;
        font: normal 36px "OpensansBold", Arial, Helvetica, sans-serif;
        color: #000;
        margin:0 auto;
        padding:10px 0;
        text-shadow: 3px 3px 0px #e1e1e1;
    }
    .pageNotFound h5 {
        text-align:center;
        font: normal 24px "OpensansSemibold", Arial, Helvetica, sans-serif;
        color:#000;
        margin:0 auto;
    }
    .pageNotFound img {
        width:100%;
        height:auto;
    }
    /*    e : page not found */
    /* s : tooltip berita terbaru */
    /* Tooltip */
    div.tooltipBerita a {
        font: normal 14px "OpensansSemibold", Arial, Helvetica, sans-serif;
        color:#000;
		text-decoration:none;
    }
    div.tooltipBerita p {
        font: normal 12px "OpensansRegular", Arial, Helvetica, sans-serif;
        color:#000;
    }
    a#trigerTooltip:hover span.tooltipBerita {
        display:block;
    }
    .tooltipBerita {
    border:1px solid #bbb;
	background: #FFFFFF;
    padding: 15px;
    position: absolute;
    z-index: 21;
	display:none;
	width:300px;
    }
.tooltipBeritaArrow {
	background:url(http://assets.kompas.com/data/2013/kompascom/images/arrow-tooltip2.png) no-repeat;
	left: -10px;
	position: absolute;
	width: 20px;
	height:20px;
	z-index: 23;
	top:10px;
}
    /* ******************************************************** s : plus ********************************************************* */
    /* s : anchor kanal wp */
    a.boxKanalL {
        text-decoration:none;
        color:#fff;
    }
    /* berita bca */
    .boxBeritaBCA {
        width:318px;
        height:80px;
        overflow:hidden;
        position:relative;
    }
    .imgzoneBCA {
        width:140px;
        height:80px;
        overflow:hidden;
        z-index:1px;
    }
    .imgzoneBCA img {
        width:140px;
        height:80px;
        overflow:hidden;
    }
    .titlezoneBCA {
        position:absolute;
        z-index:2px;
        right:0;
        background:url(http://assets.kompas.com/data/images/frontBlue.png) no-repeat;
        width:190px;
        height:80px;
    }
    .titlezoneBCA h1 {
        font:bold 14px Arial, Helvetica, sans-serif;
        color:#fff;
        margin:0;
        padding:10px 20px 6px 0px;
    }
    .titlezoneBCA a {
        font:normal 14px Arial, Helvetica, sans-serif;
        color:#fff;
        margin:0;
        padding: 13px 20px;
        text-decoration:none;
        display:block;
        overflow:hidden;
        height:50px;
    }
    .titlezoneBCA a:hover {
        text-decoration:underline;
    }
    /* s : index terpopuler */
    a.indexTerpopuler  {
        text-decoration: none;
        color: #000;
        font: normal 10px "Lucida Grande","lucida sans Unicode", Arial, Helvetica, sans-serif;
        padding:10px 5px;
    }
    a.indexTerpopuler:hover  {
        text-decoration:underline;
    }
    .borderBottomTabs2 {
        width: 350px;
        border-bottom: solid 1px #c1c1c1;
        position: absolute;
        z-index: 1;
        margin-top:-10px;
    }
    /* tag kompasiana */
    .tagKompasiana {
        font: bold 1.125em Arial, Helvetica, sans-serif;
        color: #fff;
        background: #0d5b97;
        z-index: 1;
        padding: 7px 10px;
    
        margin: -15px 0 0 -15px;
}
	/* ========== about address ============= */
.aboutAddress {
    color: #666666;
    font: 11px/16px "Lucida Sans Unicode","Lucida Grande",sans-serif;
    padding-top: 10px;
    padding-right: 3%;
    width: 75%;
	border-top:1px solid #f0f0f0;
	margin-left:10%;
	margin-top:20px;
}
.aboutAddress h1 {
    color: #666666;
    font: 14px 'opensansSemibold',"Lucida Sans Unicode","Lucida Grande",sans-serif;
	margin:5px 0;
}
.aboutAddress p {
	margin:0px 0 10px;
}
.aboutAddress a {
	color:#333;
	text-decoration:none;
}
.aboutAddress a:hover {
	color:#000;
	text-decoration:none;
}
.aboutAddress IMG {
    max-width: 100%;
}
a.joinkompasFB {
    border: 1px solid #CCCCCC;
    border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
    display: block;
    font: 12px "Lucida Sans Unicode","Lucida Grande",sans-serif;
    height: auto;
    margin: 20px 0;
    padding: 3% 3% 3% 18%;
    text-decoration: none;
    width: 80%;
	background:url(http://assets.kompas.com/data/2013/kompascom/images/identity/fbLogo.gif) 2px center no-repeat;
}
a.joinkompasFB:hover {
    border: 1px solid #BBBBBB;
    color: #333333;
	background:url(http://assets.kompas.com/data/2013/kompascom/images/identity/fbLogoHover.gif) 2px center no-repeat;
}
a.joinkompasTwitter {
    border: 1px solid #CCCCCC;
    border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
    display: block;
    font: 12px "Lucida Sans Unicode","Lucida Grande",sans-serif;
    height: auto;
    margin: 20px 0;
    padding: 3% 3% 3% 18%;
    text-decoration: none;
    width: 80%;
	background:url(http://assets.kompas.com/data/2013/kompascom/images/identity/twitter.gif) 2px center no-repeat;
}
a.joinkompasTwitter:hover {
    border: 1px solid #BBBBBB;
    color: #333333;
	background:url(http://assets.kompas.com/data/2013/kompascom/images/identity/twitterHover.gif) 2px center no-repeat;
}
a.joinkompasYoutube {
    border: 1px solid #CCCCCC;
    border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
    display: block;
    font: 12px "Lucida Sans Unicode","Lucida Grande",sans-serif;
    height: auto;
    margin: 20px 0;
    padding: 3% 3% 3% 18%;
    text-decoration: none;
    width: 80%;
	background:url(http://assets.kompas.com/data/2013/kompascom/images/identity/youtube.gif) 2px center no-repeat;
}
a.joinkompasYoutube:hover {
    border: 1px solid #BBBBBB;
    color: #333333;
	background:url(http://assets.kompas.com/data/2013/kompascom/images/identity/youtubeHover.gif) 2px center no-repeat;
}
a.joinkompasInstagram {
    border: 1px solid #CCCCCC;
    border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
    display: block;
    font: 12px "Lucida Sans Unicode","Lucida Grande",sans-serif;
    height: auto;
    margin: 20px 0;
    padding: 3% 3% 3% 18%;
    text-decoration: none;
    width: 80%;
	background:url(http://assets.kompas.com/data/2013/kompascom/images/identity/instagram.gif) 2px center no-repeat;
}
a.joinkompasInstagram:hover {
    border: 1px solid #BBBBBB;
    color: #333333;
	background:url(http://assets.kompas.com/data/2013/kompascom/images/identity/instagramHover.gif) 2px center no-repeat;
}
a.joinkompasPinterest {
    border: 1px solid #CCCCCC;
    border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
    display: block;
    font: 12px "Lucida Sans Unicode","Lucida Grande",sans-serif;
    height: auto;
    margin: 20px 0;
    padding: 3% 3% 3% 18%;
    text-decoration: none;
    width: 80%;
	background:url(http://assets.kompas.com/data/2013/kompascom/images/identity/pinterest.gif) 2px center no-repeat;
}
a.joinkompasPinterest:hover {
    border: 1px solid #BBBBBB;
    color: #333333;
	background:url(http://assets.kompas.com/data/2013/kompascom/images/identity/pinterestHover.gif) 2px center no-repeat;
}
a.joinkompasGoogle {
    border: 1px solid #CCCCCC;
    border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
    display: block;
    font: 12px "Lucida Sans Unicode","Lucida Grande",sans-serif;
    height: auto;
    margin: 20px 0;
    padding: 3% 3% 3% 18%;
    text-decoration: none;
    width: 80%;
	background:url(http://assets.kompas.com/data/2013/kompascom/images/identity/gplus.gif) 2px center no-repeat;
}
a.joinkompasGoogle:hover {
    border: 1px solid #BBBBBB;
    color: #333333;
	background:url(http://assets.kompas.com/data/2013/kompascom/images/identity/gplusHover.gif) 2px center no-repeat;
}
    
    /* advertorial berita pilihan */
    .listMoreHL h1{
        margin:0;
        padding:2px 7px;
        position:absolute;
        top:15px;
        left:38px;
        background:#de2f00;
        font:normal 11px "opensansSemibold", "Lucida Grande", sans-serif;
    color:#fff;
        display:inline-block;

        
    }
    .listMoreHL {
        position:relative;
    }
    .titleTopil h6 {
        margin:0;
        padding:0;
        font:normal 10px "opensansRegular", "Lucida Grande", sans-serif;
        color:#b6b6b6;
    }
    .titleTopil a.advText {
        color:#de2f00;
    }
    .listMoreHL a.advText2 {
        color:#de2f00;
    }
	/* Rayakan perbedaan */
	.Rayakan {
   		width:55%;
		padding:2%;
	}
	
	/* paging terbaru : s */
.pagingTerbaru {
    padding-top:20px;
}
.inPageTer ul {
    margin:0;
    padding:0;
    text-align:center;
}
.inPageTer {
    width:295px;
    margin:0 auto;
}
.inPageTer ul li {
    list-style-type:none;
    display:inline-block;
}
.inPageTer ul li a {
    display:inline-block;
    background:url(http://assets.kompas.com/data/2013/kompascom/images/inPageTer.jpg) no-repeat;
    width:13px;
    height:12px;
}
.inPageTer ul li a:hover {
    display:inline-block;
    background:url(http://assets.kompas.com/data/2013/kompascom/images/inPageTerHover.jpg) no-repeat;
    width:13px;
    height:12px;
}
.inPageTer ul li a.active {
    display:inline-block;
    background:url(http://assets.kompas.com/data/2013/kompascom/images/inPageTerHover.jpg) no-repeat;
    width:13px;
    height:12px;
}
.prevTer , .nextTer{
    opacity:0.5;
}
.prevTer:hover , .nextTer:hover{
    opacity:1;
}
.prevTer.active , .nextTer.active{
    opacity:1;
}
/* paging terbaru : e  */
/* Tooltip */
#tooltip.trigerTooltip {
	font-family: Arial;
	border: none;
	width: 210px;
	padding:20px;
	height: 135px;
	opacity: 0.8;
	background: url('http://assets.kompas.com/data/2013/kompascom/images/shadow.png');
}
#tooltip.trigerTooltip h3 {
	margin-bottom: 0.75em;
	font-size: 12pt;
	width: 220px;
	text-align: center;
}
#tooltip.trigerTooltip div { width: 220px; text-align: left; }

.footerMenu2 {
    float: left;
    padding: 20px 0 0;
    text-align: left;
    width: 74%;
}

.footerMenu2 ul {
    margin: 0;
    padding: 5px 0;
}
.footerMenu2 ul li {
    border-right: 1px solid #CCCCCC;
    display: inline-block;
    list-style-type: none;
    padding: 0 10px;
}
.footerMenu2 ul li:last-child {
    border-right: medium none;
}
.footerMenu2 ul li:first-child {
    padding-left: 0;
}
.footerMenu2 ul li a {
    color: #000000;
    font: 0.75em "OpenSansSemibold","Lucida Grande",Arial,Helvetica,sans-serif;
    text-decoration: none;
}
.footerMenu2 ul li a:hover {
    text-decoration: underline;
}
.footerMenu2 h6 {
    color: #000000;
    font: 0.75em "lucida grande", "Lucida Sans Unicode", Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
}
.footerMenu2 h6 a {
    color: #666;
    font: 1em "lucida grande", "Lucida Sans Unicode", Arial,Helvetica,sans-serif;
	text-decoration:none;
}
.footerMenu2 h6 a:hover {
    color: #000;
}
.kanalBottom2 {
    background: none repeat scroll 0 0 #F4F4F4;
    height: auto;
    margin: 20px auto 70px;
    padding: 20px 0;
    width: 1100px;
}
.buttomMenuKanal2 {
    padding-right: 20px;
}
.buttomMenuKanal2 h1 {
    border-bottom: 1px solid #CCCCCC;
    color: #000000;
    font: bold 16px "lucida grande", "Lucida Sans Unicode", Arial,Helvetica,sans-serif;
    margin: 0 0 15px;
    padding: 5px 0;
    width: 95%;
}
.buttomMenuKanal2 ul {
    margin: 0;
    padding: 0;
}
.buttomMenuKanal2 ul li {
    display: inline-block;
    list-style-type: none;
    padding: 2px 14px;
}
.buttomMenuKanal2 ul li:first-child {
    padding-left: 0;
}
.buttomMenuKanal2 ul li a {
    color: #666666;
    display: inline-block;
    font: 12px "OpensansSemibold","Lucida Grande",Arial,Helvetica,sans-serif;
    text-decoration: none;
}
.buttomMenuKanal2 ul li a:hover {
    text-decoration: underline;
}

/* banner center full */
.bannerCenterBgFull {
	background:#f5f5f5;
	margin-top:10px;
}
.bannerCenterFull {
    margin: 0 auto;
    padding: 20px 0;
    width: 990px;
}
.bannerCenter1Full {
    background: none repeat scroll 0 0 grey;
    height: 60px;
    width: 970px;
	margin:0 auto;
}
.bannerCenter2Full {
    display:none;
}

}