/* FRONTEND CSS
*********************************************/
html { overflow-y: scroll;}
body { background-color: #FFFFFF; font-family: 'Lato', sans-serif; padding:0px; margin:0px;}
.header { background:#00b4cd; padding:10px 0; color:#fff;}
button, input[type="submit"]{ text-transform:uppercase;}

/* LAYOUT
*********************************************/
/* Floats */
.float-left { float: left;}
.float-right { float: right;}
.group:before,
.group:after { content: ""; display: table;}
.group:after { clear: both;}
.ie7 .group { zoom: 1;}

a:link, a:visited {  color: #C41301;  text-decoration: none;}
ul, ol { padding: 0; margin: 0 0 10px 0; list-style:none }
ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; }
li { line-height: 18px; }
ul.unstyled, ol.unstyled { margin-left: 0; list-style: none; }

#bd .container{position:relative; max-width:550px}
#top-bar{}
#topup-logo{ margin:0; padding:0px; display:block;}
#topup-logo a{display:inline-block; }
#topup-logo span,#pesapallogo span{}
#pesapallogo{ position:absolute; right:0px; top:33px;}
#pesapallogo a { color:#fff;}
#contentarea, #contentarea_pay{ min-height:480px; /*background:url(../images/topup_bg3.png) right 20px no-repeat;*/ }
#topup-title{ color:#00aaca; font-weight:bold; font-size:16px; /*background:url(../images/orange_top.png) 150px bottom no-repeat;height:55px*/ }
#topup-title a{ font-size:12px; font-weight:normal; text-decoration:underline}
#topupForm input[type="text"],#topupForm input[type="email"]{ width:95%; display:block; background:#fff url(../images/content_bg.gif) repeat-x; height:auto; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
#topupForm{ margin-top:20px}
.field-jform_spacer{ display:none;}
a.btn-warning, a.btn-warning:hover,a.btn-inverse,a.btn-inverse:hover{ color:#fff;}
.balance{ margin-top:10px;}
.balance .alert{ margin-bottom:0px;}
.star{ color:#C00;}
#jform_account{ margin-bottom:5px;}
.psrelative{position:relative;}
.gobtn{position: absolute; right: 0px; top: 0px;}
.loading_name{ font-weight:bold;}
#bd .btn-fb,#bd .btn-tw,#bd .btn-gp{color:#fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}
#bd .btn-fb{
	border:1px solid #354073;
	background-color:#3b5e93;
	background-image:-webkit-linear-gradient(top,#5380c4,#3b5e93);
	background-image:-moz-linear-gradient(top,#5380c4,#3b5e93);
	background-image:-o-linear-gradient(top,#5380c4,#3b5e93);
	background-image:-ms-linear-gradient(top,#5380c4,#3b5e93);
	background-image:linear-gradient(top,#5380c4,#3b5e93);
}
#bd .btn-tw{
	border:1px solid #276083;
	background-color:#3a88a3;
	background-image:-webkit-linear-gradient(top,#6ab9ca,#3a88a3);
	background-image:-moz-linear-gradient(top,#6ab9ca,#3a88a3);
	background-image:-o-linear-gradient(top,#6ab9ca,#3a88a3);
	background-image:-ms-linear-gradient(top,#6ab9ca,#3a88a3);
	background-image:linear-gradient(top,#6ab9ca,#3a88a3);
}
#bd .btn-gp{
	border:1px solid #8a3215;
	background-color:#b13c1f;
	background-image:-webkit-linear-gradient(top,#c65230,#b13c1f);
	background-image:-moz-linear-gradient(top,#c65230,#b13c1f);
	background-image:-o-linear-gradient(top,#c65230,#b13c1f);
	background-image:-ms-linear-gradient(top,#c65230,#b13c1f);
	background-image:linear-gradient(top,#c65230,#b13c1f);
}
#bd .orange-social a{ margin:0 auto 10px;  display:block; max-width:50%;}
.steps{ background-color: #00aaca; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; overflow:hidden; /*max-width:48.71%;*/ margin:-5px 0px 15px 0px;
}
.steps div.span4{ float:left; padding:6px 1%; color:#fff; margin:0; font-size:14px; line-height:18px; width:31.333%; text-align:center;}
.steps div.active{ background: #ffed00;color: #333!important;}
.steps div.first{ }
a.bundles {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #AAAAAA;
    border-radius: 3px 3px 3px 3px;
    color: #333333;
    cursor: pionter;
    font-family: Arial,sans-serif;
    font-size: 11px;
    font-weight: bold;
    margin-right: 20px;
    padding: 3px 5px;
    text-decoration: none;
}
a.bundles:hover{ color:#FF5500}
#phonelst,.rnpdbg{ padding:10px; background:#fff; border:1px solid #DEDEDE; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;  border-radius: 5px; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-left-radius:5px; margin-bottom:13px;}
#phonelst{ padding: 15px 10px; display: block; overflow: hidden}
#phonelst h3, #profile h3{ margin: 0; font-size: 15px; padding:10px; line-height: 20px; background: #DEDEDE; cursor: pointer }
#phonelst h3 a, #profile h3 a{ color: #555}
#contact_list, #contact_list dd{ display:block; overflow:hidden; margin: 0 0 5px 0}
#contact_list input.contact, .uaccount-lft{ float:left; width:45%;  }
#contact_list input.amount, .uaccount-rgt{ float:right; width:45%; }
.btnright{ float:right}
.phone-list{ margin:0 0 20px 0; border:1px solid #DEDEDE; overflow:hidden }
.phone-list-header span{ width:50%; background:#EFEFEF; display:inline-block;  text-indent:10px; float:left; padding:5px 0; }
.list-item span, .list-total span{ width:50%;  display:inline-block; text-indent:10px; float:left; padding:5px 0; border-top:1px solid #DEDEDE  }

#bulktopup, #profile{-moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;  border-radius: 5px; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-left-radius:5px; overflow: hidden}
#phonelst{ padding: 15px 10px; display: block; overflow: hidden}
#phonelst h3, #profile h3{ margin: 0; font-size: 15px; padding:10px; line-height: 20px; background: #DEDEDE; cursor: pointer }
#phonelst h3 a, #profile h3 a{ color: #555}
#member-registration input[type="text"],#member-registration input[type="email"],#member-registration input[type="password"]{ width:96%}
#member-profile #jlist_title{ width: 94%}
.uaccount{ width:82.5%}
.pane-sliders .content{border: 1px solid #DEDEDE; margin:0 0 1px 0; display: block; overflow: hidden}
.pane-sliders .pane-down{ margin: -1px 0 10px 0!important; padding: 10px!important; border-bottom: 1px solid #DEDEDE!important; }
.pane-down dl{ margin: 0 0 5px 0}

div.select-label{ padding-top:0px!important;}
.btype,.ptype{ display:none;}
.ptype h5{ margin-top:0px; padding-top:0px;}
.productlist{ padding-bottom:10px}
.checkbox #loading_name{ position:relative; top:1px;}

#thankyou{ display:block; margin-bottom:10px; font-weight:600}
#paid {  background: #DFF0D8; border: 1px solid #D6E9C6; color: #468847; margin-top: 0; margin-bottom:10px; padding: 10px; }
#pending_invalid {  background: #fee9d4; border: 1px solid #f89224; color: #e1890b; margin-top: 0; margin-bottom:10px; padding: 10px; }
#failed {  background: #F2DEDE; border: 1px solid #EED3D7; color: #B94A48; margin-top: 0; margin-bottom:10px; padding: 10px; }

#confirmation .pp-cshare{ margin:10px 0;}
#confirmation .share-complete{ border-top:1px dotted #DEDEDE; margin-top:10px}
#confirmation .btn-fb,#confirmation .btn-tw,#confirmation .btn-gp{ padding:0 10px; color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}
#confirmation .btn-fb{border:1px solid #354073;background-color:#3b5e93;background-image:-webkit-linear-gradient(top,#5380c4,#3b5e93);background-image:-moz-linear-gradient(top,#5380c4,#3b5e93);background-image:-o-linear-gradient(top,#5380c4,#3b5e93);background-image:-ms-linear-gradient(top,#5380c4,#3b5e93);background-image:linear-gradient(top,#5380c4,#3b5e93)}
#confirmation .btn-fb:hover{border:1px solid #354073;}
#confirmation .btn-tw{border:1px solid #276083;background-color:#3a88a3;background-image:-webkit-linear-gradient(top,#6ab9ca,#3a88a3);background-image:-moz-linear-gradient(top,#6ab9ca,#3a88a3);background-image:-o-linear-gradient(top,#6ab9ca,#3a88a3);background-image:-ms-linear-gradient(top,#6ab9ca,#3a88a3);background-image:linear-gradient(top,#6ab9ca,#3a88a3)}
#confirmation .btn-tw:hover{border:1px solid #276083;}
#confirmation .btn-gp{border:1px solid #8a3215;background-color:#b13c1f;background-image:-webkit-linear-gradient(top,#c65230,#b13c1f);background-image:-moz-linear-gradient(top,#c65230,#b13c1f);background-image:-o-linear-gradient(top,#c65230,#b13c1f);background-image:-ms-linear-gradient(top,#c65230,#b13c1f);background-image:linear-gradient(top,#c65230,#b13c1f)}
#confirmation .btn-gp:hover{border:1px solid #8a3215;}

/* Media Queries
*********************************************/
/* Retina */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
  
}
/* Landscape phones and down */
@media (max-width: 480px) {
	.header img{ max-height:60px; margin-bottom:4px; }
	#pesapallogo{ position:relative; top:auto;}
	h1#topup-title a{ display:none;}
	.form-horizontal .control-group { margin-bottom:5px;}
	#jform_account{ margin-bottom:0;}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	#contentarea, #contentarea_pay{ /*background:url(../images/topup_bg4.png) center bottom no-repeat; padding-bottom:400px;*/ background:none }
	#top-bar{ margin:0 auto; margin-left:20px; margin-right:20px}
	#topupForm dt{ min-height:20px}
	#topupForm dd{ margin-bottom:10px}
	#member-paybill,.steps{ max-width:100%;}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
}
/* Large desktop */
@media (min-width: 1200px) {
  
}