Bootstrap style uPay CSS

upay.css

* { margin: 0; }
html, body { height: 100%; font-family: Arial, Helvetica, sans-serif; }
body { background: #f5f5f5; }
img { border-style: none; font-weight: normal; }
a:link, a:visited { color: #009; font-weight: bold; text-decoration: none; }
a:hover, a:active { color: #6cb33f; font-weight: bold; text-decoration: none; outline: none; }
a:focus, a:active { outline: none; }
:focus { outline-style: none; }
.clear { clear: both; margin: 0px; padding: 0px; height: 1px; }
p { color: #333; margin: 0px 0px 5px; font-size: 0.8em; display: block; width: 100%; }
p.donation { clear: both; }
*+html p.donation { clear: none; }
h1.header { color:#84888b; margin:0px; padding:4px 5px 2px 0px; height: auto; font-size: 1.1em; font-weight: bold; display: block; border-bottom: 1px solid #84888b; }
h2 { font-size: 1em; color: #333; padding-left: 0px; font-weight: bold; display: block; width: 100%; float: left; margin-top: 15px; }
h2.noMargin { margin:0px; }
h2.header { color:#84888b; margin:0px; padding:4px 5px 2px; height: auto; font-size: 1.1em; font-weight: bold; display: block; border-bottom: 1px solid #84888b; }
h2.donationName { color:#000; margin:0px 0px 5px; padding:0px; height: auto; font-size: 1em; font-weight: bold; display: block; }
#cart h2 { padding: 5px; background: #eee; font-size: 1em; color: #333; border-top: 1px solid #CCC; border-right: 1px solid #CCC; border-left: 1px solid #CCC; display: block; clear: both; }
.agreement h2 { font-size: 1em; color: #333; border-bottom: none; display: block; clear: both; margin-bottom: 5px; padding-bottom: 0px; margin-top: 5px; }
h3 { font-size: 0.8em; font-weight: bold; display: block; clear: both; color: #333; margin-bottom: 10px; }
hr { display: block; background: #CCC; height: 1px; width: 100%; border: none; float: left; margin: 15px 0px; }
*+html hr { margin: 15px 0px -5px 0px; }
#container { width: 980px; min-height: 100%; height: auto !important; height: 100%; margin: 0px auto -112px; padding: 0px; }
#header { background: #FFF; min-height: 132px; max-height: 165px; width: 958px; display: block; margin: 0px auto; border-bottom: 1px solid #000; }
#header .headerText { font-size: 0.8em; font-weight: bold; color: #333; display: block; float: right; width: 40%; padding: 15px; }
#header .headerImage img { max-width: 958px; overflow: hidden; }
#content { margin: 0px auto; width: 918px; padding: 20px; height: 100%; border: 1px solid #e5e5e5; background: #FFF; }
#content .banner { display: block; margin-bottom: 20px; height: 120px; width: 916px; }
#content .stndForm { display: block; }
#content #upayHeader { font-size: 1.1em; color: #333; font-weight: bold; display: block; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #CCC; width: 100%; }
#content.twoColumn { margin: 0px auto; width: 918px; padding: 20px; height: 100%; }
#content.twoColumn .banner { display: block; margin-bottom: 20px; max-height: 400px; width: 250px; float: left; }
#content.twoColumn .stndForm { display: block; width: 640px; float: right; }
#footer, .push { height: 112px; margin: 0px auto; }
#footer { width: 958px; clear: both; margin-top: 20px; }
#footer .footerImage { height:80px; width:958px; overflow:hidden; display:block; float:left; }
#footer .footerImage img { z-index:100; max-width:958px; max-height:100px; overflow:hidden; }
#footer .footerImagePrint img { z-index:1; max-width:958px; overflow:hidden; display:none; }
#footer .footerLogo { height:38px; padding-top:0px; padding-right:15px; text-align:right; float:right; width:150px; margin-top:-58px; z-index:100; }
#footer .footerLegal { float:left; display:block; width:600px; margin-top:-58px; z-index:100; padding-left:15px; }
#footertext { font-size: 0.7em; display: block; padding: 10px; float: left; width: 940px; }
#footer .footerImagePrint { display: none; }
#footer .footerLegal p { font-weight: normal; color: #666; font-size: 0.6em; margin-top: 0px; margin-bottom: 5px; }
ul.footerNavigationLinks { height: 30px; list-style: none inside; margin: 0px; padding: 0px; display: block; width: 958px; text-align: center; }
ul.footerNavigationLinks li { display: inline; }
ul.footerNavigationLinks li a { padding: 6px 15px 0px; text-decoration: none; height: 22px; font-size: 0.8em; color: #666; white-space: nowrap; font-weight: normal; }
ul.footerNavigationLinks .pipe { margin-top: 3px; margin-bottom: 7px; height: 14px; color: #dedede; margin-top: 5px\9; }
#footer .footerLegal p a:link, #footer .footerLegal p a:visited { color: #666; }
#footer .footerLegal p a:hover, #footer .footerLegal p a:active { color: #666; text-decoration: underline; cursor: pointer; }
.pageNavigation { display: block; margin-top: 10px; width: 100%; float: left; }
.pageNavigation.bottomMargin { margin: 0px 0px 10px; }
.pageNavigation.topBottomMargin { margin: 10px 0px; }
.pageNavigation.noTopMargin { margin: 0px; }
.chk-link:link, .chk-link:visited { font-size: 0.8em; color: #FFF; background: #55a51c url(../../images/button_back.png) repeat-x center; padding: 4px 5px; border: 1px solid rgb(81, 163, 81); font-weight: bold; margin-right: 15px; display: block; float: left; }
.chk-link:hover, .chk-link:hover { color: #FFF; background: #55a51c url(../../images/button_back_r.png) repeat-x center; }
.hidden { visibility: hidden; display: none; }
label { width: 49%; display: block; margin-bottom: 3px; padding: 3px 9px 0px 0px; float: left; text-align: right; font-size: 14px; }
label.auto { width: auto !important; }
label.auto { width: auto !important; }
.currencyPrefix { text-align: left; margin-left: -11px; display: block; float: left; padding-right: 5px; }
.currencySuffix { text-align: left; display: inline-block; margin-left: -5px; }
input { padding: 1px; margin-right: 5px; }
input[type=text] { display: inline-block; height: 20px; padding: 4px 6px; color: #555; line-height: 20px; border: 1px solid #CCC; }
input.text { width: 30ex; max-width: 35ex; display: block; }
input.radio { margin: 5px 5px 0px 0px; display: inline-block; float: left; }
*+html input.radio { margin: 0px 5px 0px 0px; }
input.radio, input.radio:active { border-style: none; }
input.quantity { width: 5ex !important; display: block; float: left; }
input.amount { width: 10ex; }
input.cvv { width: 4ex !important; }
input.checkbox { width: 15px !important; padding: 2px 0px 0px; margin: 1px 10px 0px 0px !important; display: block; float: left; }
#creditCardPaymentCVV2 { width: 5ex; }
select.day, select.month { width: 6ex !important; }
.donationDescription { font-size: .8em; display: block; padding-bottom: 10px; }
p.yesNo label { display: block; width: 50px; float: left; }
p.yesNo .formLabel { display: block; width: 49%; float: left; margin-bottom: 3px; padding: 3px 9px 0px 0px; }
p.legal { width: 100%; padding-right: 5px; font-size: 0.7em; }
p .dataLabel, p .data { width: 49%; display: block; padding: 0px 6px 0px 0px; margin: 0px 0px 5px; float: left; }
p .data.amount { width: 10%; display: block; margin: 0px; padding: 0px; float: left; }
.amountPaying { background: #d4e8c6; display: block; font-size: 110%; font-weight: bold; margin: 0px 0px 10px; padding: 10px 10px 2px; border: 1px solid #55a51c; }
.amountPaying p { padding: 0px; margin: 0px; width: 100%; }
.amountPaying p .dataLabel, .amountPaying p .data { width: 49%; display: inline-block; padding: 0px 6px 0px 0px; float: none; }
.amountPaying p .data { width: 20%; text-align: right; padding: 3px; border: 1px solid #55A51C; }
.amountPaying hr { border-top: 1px solid #55A51C; border-right-style: none; border-bottom-style: none; border-left-style: none; margin: 3px 0px 10px 0px; }
*+html .amountPaying hr { margin: 0px 0px -5px 0px; }
.required { font-weight: bold; color: #af292e; display: block; margin: 0px 0px 10px; padding: 0px; }
.requiredMark { font-weight: bold; color: #af292e; float: right; }
.hideRequiredMark { display: none; }
p.securityQuestion { display: block; margin: 10px 0px 0px; float: left; width: 100%; }
.returnPolicyAccept { font-size: 0.8em; display: block; width: auto; border: 1px dashed #CCC; padding: 10px; clear: both; float: left; }
.returnPolicyAccept label { padding: 0px; margin: 0px; }
.returnPolicyAccept label.acceptReturnPolicy { width: auto; }
.scrolling { width: 99%; overflow: auto; border : 1px solid #CCC; padding: 5px 0px 5px 5px; text-align: left; background: #FFF; height: 150px; font-size: 0.8em; display: block; float: left; }
ul.schedule { clear: both; display: block; padding-left: 0px; }
ul.schedule li { list-style: none; display: block; clear: both; margin: 0px; padding: 0px 5px 3px 0px; }
ul.schedule li .date { display: block; float: left; width: 51%; }
ul.schedule li .amount { display: block; width: 49%; float: right; }
*+html ul.schedule li .amount { width: 45%; }
.scrollHeader { padding-bottom: 5px; display: block; }
.messages { border:1px solid #fdb913; background:#ffedc4; padding:10px; margin-bottom: 10px; font-weight: bold; font-size: 0.8em; }
.interact { display: block; clear: right; margin: 10px 0px 0px; float: left; width: 100%; }
*+html .interact { float: none; }
.errormessage { border:1px solid #fdb913; background:#ffedc4; padding:10px 10px 5px; margin-bottom: 10px; font-weight: bold; margin-top: 10px; }
.paymentCards { display: block; margin-top: 10px; width: 49%; }
.paymentCards img { display: inline-block; padding: 1px; border: 1px solid #CCC; margin: 0px 10px 10px 0px; }
.stndAnnouncementText { font-weight: bold; display: block; width: 100%; clear: both; }
.pleaseWait { text-align: center; margin: 60px auto 30px; width: 800px; }
.pleaseWait img { display: block; margin: 0px auto; }
.itemTotal .dataLabel, .itemTotal .data { width: 49%; display: block; margin-bottom: 15px; padding: 3px 5px 0px 0px; float: left; font-weight: bold; }
p.returnPolicy { display: block; border: 1px dashed #CCC; margin: 10px 0px 0px; clear: both; float: left; padding: 5px 0px; }
p.returnPolicy label.acceptReturnPolicy { width: 90%; font-weight: bold; margin: 0px; padding: 0px; }
p.returnPolicy input.checkbox { padding-left: 10px; margin: 2px 10px 0px 5px !important; }