@charset "utf-8";

#TopBukaAkun{
background:#fafafa;
padding:4px;
margin:0;
}
#TopBukaAkun .kolom{
width:213px;
float:left;
padding:5px;
margin:0px;
}
#TopBukaAkun .kolom-center{
width:207px;
float:left;
padding:5px;
margin:0px;
border-left:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
}
#TopBukaAkun .titlebar .title{
font-size:18px;
font-weight:normal;
}
.w310 .titlebar .title{
font-size:18px;
font-weight:normal;
margin-bottom:2px;
}
#TopBukaAkun .clear{
clear:both;
}
#TopBukaAkun .orange{
color:#7d7d7d;
background:#fff;
text-align:center;
border-radius:3px;
}
#TopBukaAkun ul{
padding:0;
margin:10px;
list-style:none;
}
#TopBukaAkun li{
padding-left : 10px;
background : url(../images/element/list-style-square.png) left center no-repeat;
font-weight:bold;
}
#TopBukaAkun .videoContent{
width:100%;
height:130px;
overflow:hidden;
margin:3px 0;
background:#000;
}
.angleWhite{
width:0px;
height:0px;
line-height:0px;
margin:0 auto;
padding:0;
border-top:10px solid #fff;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
}
.navAkun{
border-bottom:1px solid #a0a0a0;
padding:5px 0;
margin:5px 0 15px;
}
.navAkun ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
.navAkun li{
display:inline-block;
padding:0px 20px;
margin:0;
border-right:1px solid #a0a0a0;
list-style:none;
}
.navAkun li.last{
border:none;
}
.navAkun a{

font-size:14px;
font-weight:normal;
color:#666;
}
.navAkun a.on{
font-weight:normal;
color:#666;
}
.navAkun a:hover{
	color:#000000;
}
.navbarAkun .title{
font-size:28px;
color:#717171;
}
.navbarAkun .desc{border-top:1px solid #999; padding:20px 0; font-size:16px;}
.navbarAkun .Paket{
width:191px;
height:83px;
background:url(../images/element/pageAkun-Paket.png) no-repeat -0px -0px;
overflow:hidden;
position:absolute;
right:75px;
top:0px;
padding:10px;
margin:0;
text-align:center;
}
a .Paket .paket2{
color:#666;
margin:0 0 2px;
text-decoration:none;
}
a:hover .Paket .paket2{
color:#000;
}
.navbarAkun .pageAkun .on{
font-weight:bold;
color:#000;
}
.navbarAkun .pageAkun{
font:italic 14px arial;
float:right;
margin-right:3px;
vertical-align:middle;
color:#666;
}
.stepAkun ul{
padding:0;
margin:0;
list-style:none;
}
.stepAkun li{
width:200px;
float:left;
overflow:hidden;
}
.stepAkun li.tiga{
width:333px;
float:left;
overflow:hidden;
}
.stepAkun li.empat{
width:250px;
float:left;
overflow:hidden;
}
.stepAkun .clear{
clear:both;
}
.stepAkun li .titleStep{
background:#52b412 url(../images/element/spaceGreenGreen.png) right center no-repeat;
color:#fff;
padding:5px;
}
.stepAkun li .descStep{
padding:5px;
color:#52b412;
}
.stepAkun li.active .titleStep{
background:#323232 url(../images/element/spaceOrangeGreen.png) right center no-repeat;
}
.stepAkun li.active.prev .titleStep{
background:#323232 url(../images/element/spaceOrangeOrange.png) right center no-repeat !important;
}
.stepAkun li:last-child .titleStep,.stepAkun li.active.prev:last-child .titleStep{
background-image:none !important;
}
.stepAkun li.active .descStep{
color:#323232;
}
.contentStep{
padding:0;
margin:0 auto;
}
.contentStep .main .title{
text-align:center;
display:block;
font-size:22px;
margin:15px 0;
}
.contentStep .main.border{
padding:10px;
border:1px solid #a0a0a0;
}
.contentStep .title1{
display:block;
margin:15px 0;
font-size:18px;
text-align:center;
line-height:1.4em;
}
.contentStep .title2{
display:block;
margin:15px 0;
line-height:1.4em;
font-size:24px;
font-weight:bold;
text-align:center;
}
.contentStep .title3{
display:block;
margin:15px 0;
font-size:18px;
font-weight:normal;
text-align:center;
font-style:italic;
}
.contentStep .main .content,.contentStep .content{
font:normal 14px arial;
line-height:1.6em;
}
.optionAkunWrap.color{
background:#eaefc6;
padding:20px;
}
.optionAkunWrap.white{
background:#fff;
padding:20px;
}
.optionAkun{
width:400px;
margin:15px auto;
}
.optionAkun .titleLabel{
font-size:24px;
}
.descLabel{
margin:0 0 0 20px;
font-style:italic;
}
.contentStep .main ol{
margin:0 0 0 0px;
}
.disclaimer .scroll{
height:300px;
overflow:auto;
padding:15px;
border:1px solid #a0a0a0;
}
.titleKet{
font-size:18px;
padding:4px 0;
}
.ket{
font:italic 12px arial;
color:#999;
padding:4px 0;
}
.titleForm{
font-size:18px;
text-transform:uppercase;
background:#eaefc6;
padding:5px 10px;
}
.mainForm{
margin:10px;
}
.formName{
width:170px;
float:left;
margin-right:15px;
display:block;
}
.warning{
display:block;
font-size:22px;
text-align:center;
margin:15px 0;
}
.clearfixWrap{
margin:10px 25px;
}
.titleScroll{
font-size:20px;
line-height:1.6em;
dispay:block;
margin:10px 0;
}
.bold{
font-weight:bold;
}
.sign{
float:right;
margin:15px 0;
}
.sign .signature{
margin:0 0 70px;
}
.angleSign{
width:0px;
height:0px;
line-height:0px;
margin:0 auto;
padding:0;
border-top:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid transparent;
border-left:100px solid #333;
}
.red{
color:red;
}
table.txt{
min-width:100%;
}
table.txt td{
padding:8px 5px 8px 0;
}
.content li{
margin-left:25px;
}
.rekening{
width:30%;
float:left;
}
.rekening.tengah{
width:30%;
float:left;
margin:0 5%;
}
.rekening label{
float:left;
display:block;
margin:0 0 0 5px;
}
.rekening input{
float:left;
display:block;
margin-top:3px;
}
.altForm{
color:#999;
font-size:12px;
}
.altForm.red{
color:red;
font-size:12px;
}
.TotalBayar{
display:block;
margin:15px 0;
padding:0;
text-align:center;
}
ul.abjad li{
list-style:lower-alpha;
padding:0 0 5px;
margin:0 0 0 25px;
}
ul.lower li{
list-style:lower-roman;
padding:0 0 5px;
margin:0 0 0 25px;
}
ol li ul li{
list-style:square;
padding:0 0 5px;
margin:0 0 0 25px;
}
.AfterSort{
text-align:center;
border-bottom:1px solid #a0a0a0;
margin:20px 0;
}
.AfterSort1{
margin:5px 0;
}
.AfterSort2{
color:#7d7d7d;
font-size:26px;
margin:15px 0;
}
.AfterSort3{
font-size:18px;
margin:5px 0;
}
.AfterSort4{
font:normal 14px arial;
color:#666;
margin:5px 0;
}
.AfterSort5{
font:normal 14px arial;
color:#666;
margin:20px 0;
}
.AfterSort6{
padding:20px 0;
font:normal 14px arial;
}
.bayar{
margin:0 auto;
border:1px solid #b9be16;
padding:25px;
width:680px;
}
.bayar .title{
margin:5px 0;
}
.tambah{
min-width:300px;
margin:0 auto 15px;
text-align:center;
}
.bca{
background:url('../images/element/bca.png') 0 0 no-repeat;
width:130px;
height:31px;
display:inline-block;
vertical-align:middle;
margin:0 0 0 15px;
}
.TotalTabel{
border-bottom:1px solid #c6c6c6;
border-top:1px solid #c6c6c6;
background:#efefef;
text-align:center;
font-weight:bold;
padding:5px 0;
margin:15px 0;
}
.TotalTabel-2{
border-bottom:none;
border-top:1px solid #c6c6c6;
background:#efefef;
text-align:center;
font-weight:bold;
padding:5px 0;
margin:0px 0;
}
#contactBottom{
background:#eaefc6;
padding:15px 25px 5px;
margin:40px 0 10px;
}
.kolom1{
border-bottom:4px solid #7d7d7d;
margin:0px 20px -10px 0px;
padding:0 0 20px;
width:100px;
font-size:18px;
}
.kolom2{
width:270px;
color:#666;
margin:0px 20px 0 0;
font-size:14px;
}

.kolom3{
background:#52b412;
width:300px;
padding:4px;
margin:8px 20px 0 0;
font-size:16px;
color:#ffd9cc;
font-weight:bold;
text-align:center;
}
.kolom3 a{
color:#ffd9cc;
text-decoration:none;
}
.kolom3 a:hover{
color:#fff;
}
.kolom4{
width:80px;
color:#666;
margin:8px 20px 0 0;
}
.kolom4 .button{
padding:0 45px;
}
.kolom5{
width:70px;
border-left:1px solid #7d7d7d;
text-indent:20px;
font-style:italic;
font-size:24px;
font-weight:bold;
color:#7d7d7d;
padding:15px 0;
}
.kolom5 a.orange{
color:#7d7d7d;
text-decoration:none;
}
.kolom5 a:hover.orange{
color:#52b412;
}
.headerAgenWrapper{
border-bottom:1px solid #b29730;
background:#f8f4eb;
padding:4px 55px 2px;
margin:0 auto 25px;
}
.headerAgenLogo{
padding:0 35px 0 0;
margin:0 40px 0 0;
float:left;
border-right:1px solid #b29730;
}
.headerAgenInfo{
padding:25px 0 0;
margin:0;
float:left;
color:#9f8d3b;
font-size:12px;
font-weight:bold;
}
.TotalTabel-2{
border-bottom:none;
border-top:1px solid #c6c6c6;
background:#efefef;
text-align:center;
font-weight:bold;
padding:5px 0;
margin:0px 0;
}
#contactBottom{
background:#dcf3d6;
padding:15px 25px 5px;
margin:40px 0 10px;
}
.kolom1{
border-bottom:4px solid #7d7d7d;
margin:0px 20px -10px 0px;
padding:0 0 20px;
width:100px;
font-size:18px;
}
.kolom2{
width:270px;
color:#666;
margin:0px 20px 0 0;
font-size:14px;
}
.kolom3{
background:#52b412;
width:300px;
padding:4px;
margin:8px 20px 0 0;
font-size:16px;
color:#fff;
font-weight:bold;
text-align:center;
}
.kolom3 a{
color:#fff;
text-decoration:none;
}
.kolom3 a:hover{
color:#fff;
}
.kolom4{
width:80px;
color:#666;
margin:8px 20px 0 0;
}
.kolom4 .button{
padding:0 45px;
}
.kolom5{
width:70px;
border-left:1px solid #7d7d7d;
text-indent:20px;
font-style:italic;
font-size:24px;
font-weight:bold;
color:#7d7d7d;
padding:15px 0;
}
.kolom5 a.orange{
color:#7d7d7d;
text-decoration:none;
}
.kolom5 a:hover.orange{
color:#52b412;
}
.headerAgenWrapper{
border-bottom:1px solid #b29730;
background:#f8f4eb;
padding:4px 55px 2px;
margin:0 auto 25px;
}
.headerAgenLogo{
padding:0 35px 0 0;
margin:0 40px 0 0;
float:left;
border-right:1px solid #b29730;
}
.headerAgenInfo{
padding:25px 0 0;
margin:0;
float:left;
color:#9f8d3b;
font-size:12px;
font-weight:bold;
}
/*JO*/
.paketLangganan{margin-top:30px;}
.paketLangganan .list{padding:15px 0 30px;}
.paketLangganan .img{width:250px; text-align:center}
.paketLangganan .desc{width:550px; font-size:14px; line-height:20px;}
.paketLangganan .radioList li{padding:5px 0;}

.formLangganan .container , .formKonfirmasi .container{padding:30px 0 30px 150px; width:750px; font-size:16px; line-height:20px;}
.formLangganan .label{width:180px;}
.formLangganan  .form_row , .formKonfirmasi .form_row{padding:8px 0;}
.formLangganan .lineBreak{margin:20px 0; height:1px; background-color:#999;}

.formKonfirmasi .label{width:250px;}

.paymentConfirmation{ font-size:16px;}
.paymentConfirmation .paymentSelection li{width:168px; height:187px; float:left; margin-right:1px; background-color:#f3f5dd; position:relative; padding:45px 0 25px; text-align:center; font-size:14px; font-weight:bold;
transition: background-color 0.3s; -moz-transition: background-color 0.3s; -webkit-transition: background-color 0.3s; o-transition: background-color 0.3s;}
.paymentConfirmation .paymentSelection li:hover{background-color:#e4e7c5;}
.paymentConfirmation .paymentSelection li.last{margin:0;}
.paymentConfirmation .paymentSelection .numb{width:40px; height:40px; line-height:40px; color:#fff; font-size:30px; font-weight:bold; text-align:center; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; background-color:#adc019; z-index:999; position:absolute; top:-20px; left:60px;}
.paymentConfirmation .paymentSelection li label{display:block; position:absolute; z-index:99; width:164px; height:252px; top:0; left:0;}
.paymentConfirmation .paymentSelection li input[type='radio']{opacity:0;}
.paymentConfirmation .paymentSelection li.active label{border:2px solid #ff4800;}
.paymentConfirmation .paymentSelection li.active .numb{background-color:#ff4800;}
.paymentConfirmation .lineBreak , .paymentDetails .lineBreak{margin:5px 0; height:1px; background-color:#999;}

.paymentConfirmation  .form_row{padding:8px 0;}
.paymentConfirmation  .form_row .label{width:180px;}
.paymentConfirmation .terms{font-size:14px; line-height:20px;}
.paymentConfirmation .terms .boxed{background-color:#EAEFC6; padding:10px;  margin-top:30px;}

.paymentDetails{font-size:13px;}
.paymentDetails .form_row{padding:3px;}
.paymentDetails .form_row .label{width:130px;}
.paymentDetails .form_row .price{text-align:right;}

.order{ width:730px; margin:0 auto;}
.order2{ width:600px; margin:0 auto;}