*, body { margin:0 auto; padding:0; }
body { background:#000; }
body, th, td, div { font:normal 12px Verdana, Tahoma, Arial, 'Microsoft Yahei', 'Simsun', Helvetica, Sans-serif; }
h3 { color:yellow; }
sub { color:#999; }
button { cursor:pointer; }
hr { margin-top:6px; border-top:1px solid #333; border-bottom:1px solid #555; border-right:none; }
.cb { clear:both; }
.center { text-align:center; }
.hide { display:none; }
/* mask */
.mask { z-index:100; background:rgba(0, 0, 0, 0.75); position:fixed; margin:0 auto; padding:0; width:100%; height:100%; text-align:center; }
.mask.loading {background:rgba(0, 0, 0, .96) url(../images/loading-circle.gif) 50% 20% no-repeat; opacity: 0.65; filter: alpha(opacity=65); }
/* warning */
.warning { background:#fae9b6; margin:6px auto; padding:2px 10px; display:none; color:#913618; font-weight:normal; font-size:14px; text-shadow:1px 1px 0 #cebfb1; border:2px solid #e49529; border-radius:4px; }
/* country */
#flag { font-weight:bold; font-size:14px; }
/* */
img.photo#logo {margin-bottom:20px;border-radius:4px;box-shadow:1px 1px 12px 8px #333, 0 0 4px 8px #ccc inset;}
div#topup_content {margin:10px auto;padding:6px;text-align:center;}
#snopin #itemtype {margin:8px auto;text-align:center;}
#snopin #itemtype h4 {margin:10px auto;}
#snopin #itemtype .desc { display:inline-block;background:#222; border:1px solid #444; padding:8px 12px; border-radius:6px;}
#snopin #itemtype .desc .price { color:#ffff05; }
/* A bit custom styling */
#channel-page { }
#channel-page .language {line-height:20px;}
#channel-page .ui-title, #channel-page .ui-li-aside { font-family:'Open Sans', sans-serif; font-weight:400; }
#channel-page .ui-header { color:#ffeaff; }
#channel-page .ui-footer { color:#eee; }
#channel-page .ui-li-desc { color:#ccc; margin-right:2px; }
#channel-page .ui-li-desc.ui-li-aside { margin:0; padding:2px 10px; top:0; right:0; width:auto; min-height:0; color:#222; }
#channel-page .ui-li-aside { color:#ffa2ff; }
#channel-page .ui-li .ui-btn-inner { padding:6px 10px; height:22px; }
#channel-page .channel .ui-btn-inner { padding:6px 0; border-top:none;}
#channel-page .channel {padding-top:4px; text-decoration: none; border:1px solid #222;}
#channel-page .channel:hover {background:#222;border:1px solid #333; border-radius:3px;}
#channel-page .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { margin:0 auto; padding:0; text-align:center; color:#999; }
#channel-page .ui-controlgroup-vertical .ui-btn { display:inline-block; margin:3px 4px; overflow:hidden; }
#channel-page .ui-controlgroup-vertical .ui-btn img { width:100%; border-radius:6px; width:60%; max-width:120px;}
#channel-page .ui-controlgroup-vertical .ui-btn h3 { font:bold 12px/16px tahoma, arial, sans-serif; text-shadow:2px 2px 2px #333; color:#f9f9f9; }
#channel-page .ui-field-contain .ui-controlgroup-controls { width:100%; }
#channel-page h3.ui-li-heading { color:#f9f9a9; }
#channel-page h4.ui-li-heading, h4.ui-li-heading { color:#fff; }
#channel-page ul.ui-listview li { margin:10px 3px; padding:0px; height:120px; }
#channel-page ul.ui-listview .ui-li.ui-btn { background:linear-gradient(#999, #444) repeat scroll 0 0 #717171; float:left; width:100px; margin:2px 5px 2px 2px; min-height:60px; border:2px solid #222; overflow:hidden; }
#channel-page ul.ui-listview .logo, #channel-page ul.ui-listview .ui-li-thumb { background-size:cover; float:none; position:static; margin:8px auto 0; height:80px; border:2px solid #555; border-radius:0; }
#channel-page ul.ui-listview .ui-li-heading { margin:0 auto 6px; width:inherit; color:#fff; font-family:Verdana, Tahoma, Arial, Helvetica, Sans-Serif; font-weight:bold; font-size:12px; text-shadow:1px 1px 1px #000; }
#channel-page ul.ui-listview .channel .ui-li-desc { display:none; }
#channel-page ul.ui-listview .ui-disabled { background:#2b2b2b; cursor:default; }
/* For this demo we used images with a size of 310x310 pixels. 
Just before the second breakpoint the images 
reach their max width:1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */

.popup_channel { background:#fff; min-width:320px; }
.ui-content { min-height:380px; }
.ui-body { }
.ui-body h4 { color:#eee; font-size:14px; text-shadow:2px 2px 2px #222; }
.ui-footer .ui-title { font-size:14px; }
.ui-field-contain .ui-controlgroup-controls { width:100%; }
/* debug log */
.debug { display:none; background:rgba(238, 254, 184, .75); z-index:1000; position:fixed; top:1px; right:1px; padding:2px 4px; width:220px; height:99%; border:1px solid #f8b310; }
.debug p { margin:2px 0; font:normal 12px/16px tahoma, arial, sans-serif; clear:both; }
.debug span.elapsetime { float:right; font-weight:bold; font-size:11px; font-family:arial, tahoma, sans-serif; }
.debug div.safe_mode { position:absolute; bottom:0; right:0; width:auto; font-weight:bold; }
.debug div.elapsed_time { height:200px; border-bottom:1px solid #d2d2d2; overflow:auto; }
.debug div.maintenace { height:auto; color:#800000; }
/* channel icon */
#channel-page img.photo { border:6px solid #c1c1c1; border-radius:5px; }
.channel_title { margin:2px auto 8px; padding:5px 5px; }
.channel_title h3 { color:#ffff05; font-size:16px; text-shadow:2px 2px 2px #222; }
span.my_msg { background:yellow; color:#d8301a; display:inline-block; font-size:14px; font-weight:bold; padding:8px 16px; border:1px solid #adad00; border-radius:3px; text-shadow:1px 1px 0 #ffa; }
/* table list */
table.listing { margin-top:16px; border-collapse:collapse; }
table.listing th, table.listing td { padding:10px 18px; }
table.listing th { background:#4980af; color:#ffff0d; font-weight:bold; border:2px solid #222; }
table.listing td { background:#292929; color:#ccc; border:2px solid #222; }
table.listing td strike { color:#db0a0e; }
/* active & inactive */
.neon { z-index:1000; position:absolute; display:inline-block; bottom:0; right:0; width:6px; height:6px; border-radius:6px; }
.neon.active { background:#8eff7f; border:2px solid #11af11; }
.neon.inactive { background:#e0000e; border:2px solid #ffab99; }
/* faq list */
.faqlist li { margin:10px 0 20px; }
.faqlist li h3 { color:#79ff4c; }
/* country flag */
#channel_country { margin:0 auto; }
.flag { display:inline-block; margin:0 6px; padding:0 4px; border:1px solid #333; box-shadow:0 0 9px #444; cursor:pointer; opacity:.55; }
.flag:hover { opacity:.86; }
.flag.selected { box-shadow:0 0 9px #000 inset; cursor:default; border-radius:4px; opacity:1; }
.flag .circular { margin-top:-6px; display:inline-block; width:60px; height:56px; overflow:hidden; }
.flag .circular img { margin-top:2px; width:60px; }
/* channel form */
.channel_global_setter { z-index:100; background-color:#000; position:fixed; top:0; left:0; width:100%; border-top:1px solid #555; }
.channel_global_setter input { background:rgba(0, 0, 0, .56); padding:6px 3px; margin:0 auto; color:#fff; font-size:15px; line-height:1em; text-shadow:0 1px 0 #444; border:1px solid #333; }
/* for check topup status usage */
.dialog_show_button { z-index:101; position:fixed; top:30%; left:50%; margin-left:-130px; width:260px; min-height:90px; }
/* 3rd party button */
#channel_servicelist ul { list-style:none; margin:0 auto; padding:0; text-align:center; }
#channel_servicelist ul li.list { margin:6px 8px; display:inline-block; }
#channel_servicelist ul li.list .rdbutton { background: #5f707a; min-width:150px;
                                            background-image: -webkit-linear-gradient(top, #5f707a, #182229);
                                            background-image: -moz-linear-gradient(top, #5f707a, #182229);
                                            background-image: -ms-linear-gradient(top, #5f707a, #182229);
                                            background-image: -o-linear-gradient(top, #5f707a, #182229);
                                            background-image: linear-gradient(to bottom, #5f707a, #182229); padding:20px 12px; display:inline-block; font-size:14px; font-weight:bold; color: #fff; border:2px solid #000; border-radius:5px; cursor:pointer; }
#channel_servicelist ul li.list .rdbutton:hover { background:#666; color:#fff; box-shadow:1px 1px 6px #555 inset; }


/* First breakpoint is 768px. 3 column layout. Tiles 250x250 pixels at the breakpoint. */
@media all and (min-width:768px) {
    #channel-page .ui-content { padding:9px; }
    #channel-page ul.ui-listview .ui-li.ui-btn { float:left; width:152px; height:140px; margin:9px 1.2%; border-width:0; }
    /* If you don't want a border at all, just set "border:none;" here to negate the semi white top border */
    #channel-page ul.ui-listview .ui-li.ui-btn-inner { padding:0; }
    #channel-page ul.ui-listview .ui-btn-inner, #channel-page .ui-listview .ui-btn-text, #channel-page .ui-listview .ui-link-inherit, #channel-page .ui-listview .ui-li-thumb { width:100%; height:100%; display:block; overflow:hidden; }
    #channel-page ul.ui-listview .ui-link-inherit { padding:0 !important; position:relative; }
    /* Inherit the border-radius from the UL that has class .ui-corner-all in case of an inset listview. */
    #channel-page ul.ui-listview .ui-li, #channel-page .ui-listview .ui-btn-text, #channel-page .ui-listview .ui-link-inherit, #channel-page .ui-listview .ui-li-thumb { -webkit-border-radius:inherit; border-radius:inherit; text-align:center; }
    #channel-page ul.ui-listview .ui-li-thumb { height:auto; max-width:96%; max-height:none; margin:0; left:0; z-index:-1; }
    /* Hide the icon */
    #channel-page ul.ui-listview .ui-icon { display:none; }
    /* Make text wrap. */
    #channel-page ul.ui-listview .ui-li-heading, #channel-page ul.ui-listview .ui-li-desc { white-space:normal; overflow:visible; position:absolute; left:0; right:0; }
    /* Text position */
    #channel-page ul.ui-listview .ui-li-heading { margin:0; padding:6px 0; bottom:0%; color:#fff; }
    #channel-page ul.ui-listview li:hover .ui-li-heading { bottom:24%; padding:0; }
    #channel-page ul.ui-listview .channel .ui-li-desc { display:block; }
    #channel-page ul.ui-listview li:hover .ui-li-desc { margin:0; padding:0 2px; min-height:24%; bottom:0; color:#ccc; }
    /* Semi transparent background and different position if there is a thumb */
    ul.ui-listview .ui-li-has-thumb .ui-li-heading, ul.ui-listview .ui-li-has-thumb .ui-li-desc { background:#152944; background:rgba(0, 46, 184, .85); -webkit-background-clip:padding; background-clip:padding-box; color:#fff; text-shadow:0 1px 0 #222; }
    ul.ui-listview .ui-li-has-thumb .ui-li-heading { padding:10px; bottom:20%; }
    ul.ui-listview .ui-li-has-thumb .ui-li-desc { padding:0 10px; min-height:20%; -webkit-border-bottom-left-radius:inherit; border-bottom-left-radius:inherit; -webkit-border-bottom-right-radius:inherit; border-bottom-right-radius:inherit; }
    /* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
    #channel-page ul.ui-listview .ui-li-desc.ui-li-aside { padding:2px 10px; width:auto; min-height:0; top:0; left:auto; bottom:auto; color:#ccc; background:#000; -webkit-border-top-right-radius:inherit; border-top-right-radius:inherit; -webkit-border-bottom-left-radius:inherit; border-bottom-left-radius:inherit; -webkit-border-bottom-right-radius:0; border-bottom-right-radius:0; }
    /* If you want to add shadow, don't kill the focus style. */
    #channel-page ul.ui-listview .ui-btn:not(.ui-focus) { -moz-box-shadow:0px 0px 9px #111; -webkit-box-shadow:0px 0px 9px #111; box-shadow:0px 0px 9px #111; }
    /* Images mask the hover bg color so we give desktop users feedback by applying the focus styles on hover as well. */
    #channel-page ul.ui-listview .ui-btn:hover { -moz-box-shadow:0px 0px 12px #387bbe; -webkit-box-shadow:0px 0px 12px #387bbe; box-shadow:0px 0px 12px #387bbe; }
    /* Animate focus and hover style, and resizing. */
    #channel-page ul.ui-listview .ui-btn { -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; -ms-transition:all 500ms ease; }
}
/* Second breakpoint. 4 column layout. Tiles will be 250x250 pixels again at the breakpoint. */
@media all and (min-width:1020px) {
    #channel-page .ui-content { padding:10px; }
    #channel-page ul.ui-listview { max-width:1000px; margin:0 auto; }
    #channel-page ul.ui-listview .ui-li.ui-btn { margin:10px 1%; }
}

@media all and (max-width:540px) {
    #channel_servicelist ul {margin:0 auto; }
    #channel_servicelist ul, #channel_servicelist ul li.list { width:100%; padding:0; }
    #channel_servicelist ul li.list { display: block; margin:8px auto; }
    #channel_servicelist ul li.list .rdbutton { padding:18px 0; width:100%; }
}