Helcim Logo Support & Tutorials

© Copyright 2006-2018 Helcim Inc.

All Rights Reserved.

Legacy Platforms » Helcim Virtual Terminal » Hosted Payment Pages » CSS »

Default CSS

Below is the default CSS used for our payment page. Under the payment page settings, this CSS will be used if the CSS field is left empty. The CSS below can be used as a started point when designing your own template.

/* HYPERLINKS */
a:link {color: #004A6F; text-decoration: none;}
a:visited {color: #004A6F; text-decoration: none;}
a:active {color: #0099FF; text-decoration: underline;}
a:hover {color: #0099FF; text-decoration: underline;}

/* BODY */
body {font-family: Arial, sans-serif; color: #252525; background-color: #CACACA; padding: 15px; margin: 0px;}
form {margin: 0px; padding: 0px;}

/* HEADERS */
h1 {font-family: Arial, sans-serif; font-size: 28px; font-weight: bold; color: #FFFFFF; margin: 0px 0px 15px 0px; padding: 10px;
    text-align: center; background-color: #515151; border-radius: 5px; box-shadow: 3px 5px 10px #ACACAC;}
h2 {font-family: Arial, sans-serif; font-size: 17px; font-weight: normal; color: #8D8D8D; margin: 0px; padding: 7px 0px 10px 15px;}
h3 {font-family: Arial, sans-serif; font-size: 30px; font-weight: normal; color: #535353; margin: 0px; padding: 25px 25px 0px 25px;}
h4 {font-family: Arial, sans-serif; font-size: 22px; font-weight: normal; color: #535353; margin: 0px; padding: 30px;
    text-align: center;}

/* IMAGES */
img.MerchantLogo {margin: 0px 0px 10px 0px; position: absolute; left: 0px;}
img.CardBrand {width: 50px; height: 31px;}

/* PARAGRAPH */
p.Policies {font-size: 13px; font-family: Arial, sans-serif; font-weight: normal; line-height: 150%; padding: 25px; margin: 0px;}
p.ThankYou {font-size: 22px; font-family: Arial, sans-serif; font-weight: normal; line-height: 150%; padding: 0px;
            margin: 0px 0px 40px 0px; color: #252525; text-align: center; line-height: 1.5em;}

/* WINDOWS */
div.WindowContainer {width: 650px; margin: 0px auto; padding: 0px;}
div.WindowMain {overflow: hidden; background-color: #FFFFFF; text-align: left; padding: 10px; box-shadow: 3px 5px 10px #ACACAC;
    border-radius: 5px;}
div.WindowSub {padding: 10px; margin-bottom: 10px; background-color: #F0F0F0; border-radius: 5px;}
div.WindowSubLarge {padding: 10px 0px 10px 0px; margin-bottom: 10px; background-color: #F0F0F0; border-radius: 5px;}
div.WindowAmount {padding: 10px; margin-bottom: 10px; background-color: #F0F0F0; border-radius: 5px;}
div.WindowCardBrands {padding: 0px 0px 5px 0px; text-align: center;}
div.WindowProcess {overflow: hidden; margin: 0px; float: right;}
div.WindowLinks {overflow: hidden; padding: 18px 0px 18px 0px; font-size: 10px;}

/* TABLE INPUT */
table.Input {margin: 0px; padding: 0px; border-collapse: collapse; width: 500px;}
table.Input td {padding: 0px; font-size: 12px;}
table.Input td.Left {text-align: right; width: 160px;}
table.Input td.Right {text-align: left; padding: 1px 5px 1px 20px;}
table.Input div.SubText {font-style: italic; font-size: 10px; color: #CA0000;}

/* TABLE ITEMS */
table.Items {margin: 0px; padding: 0px; border-collapse: collapse; width: 100%;}
table.Items td {padding: 3px 20px 3px 20px; font-size: 12px; }
table.Items td.TopLeft {text-align: left; font-weight: bold; padding-top: 10px;}
table.Items td.TopRight {text-align: right; font-weight: bold; padding-top: 10px;}
table.Items td.Item {text-align: left; padding-right: 20px;}
table.Items td.Number {text-align: right; padding-left: 20px;}
table.Items td.SubLine {text-align: right;}

/* TABLE AMOUNT */
table.Amount {margin: 0px auto; padding: 0px; border-collapse: collapse;}
table.Amount td {padding: 3px 10px 3px 10px; font-size: 12px;}
table.Amount td.Left {text-align: right; font-size: 23px;}
table.Amount td.Right {text-align: right; font-size: 23px; font-weight: bold;}

/* DROP DOWN MENU */
div.Cbo {float: left; border: solid 1px #C3C3C3; background-color: #FFFFFF; font-size: 13px; padding: 0px; vertical-align: center;
         margin: 0px 1px 0px 0px; border-radius: 4px;}
select {border: solid 0px white; background-color: #FFFFFF; font-size: 13px; font-family: Arial, sans-serif; margin: 6px;
        color: #3A3A3A;}

/* INPUT TEXT FIELDS */
input.TxtLarge {border: solid 1px #C3C3C3; background-color: #FFFFFF; font-size: 14px; padding: 6px; width: 100%;
                font-family: Arial, sans-serif; color: #3A3A3A; border-radius: 4px;}
input.TxtMedium {border: solid 1px #C3C3C3; background-color: #FFFFFF; font-size: 14px; padding: 6px; width: 150px;
                 font-family: Arial, sans-serif; color: #3A3A3A; border-radius: 4px;}
input.TxtSmall {border: solid 1px #C3C3C3; background-color: #FFFFFF; font-size: 14px; padding: 6px; width: 50px;
                font-family: Arial, sans-serif; color: #3A3A3A; border-radius: 4px;}
input.TxtAmount {border: solid 1px #C3C3C3; background-color: #FFFFFF; font-size: 25px; padding: 6px; width: 140px;
                 font-family: Arial, sans-serif; color: #3A3A3A; border-radius: 4px;}

/* TEXT AREA */
textarea.TxtArea {width: 100%; height: 50px; border: solid 1px #C3C3C3; background-color: #FFFFFF; font-size: 14px;
                  padding: 6px; width: 100%; font-family: Arial, sans-serif; color: #3A3A3A; border-radius: 4px;}

/* ERRORS */
div.Error1 {color: #FFC6C9; padding: 12px; font-size: 15px; background-color: #AE0000; margin-bottom: 15px; text-align: center;
            font-weight: normal; box-shadow: 3px 5px 10px #ACACAC; border-radius: 5px;}

/* INPUT BUTTON */
input.BtnPay {border: solid 0px #006699; border-radius: 4px; background-color: #0099FF; padding: 7px 30px 7px 30px;
              margin-left: 3px; font-size: 17px; font-weight: bold; color: #FFFFFF;}
input.BtnCancel {border: solid 0px #C0C0C0; border-radius: 4px; background-color: #BBBBBB; padding: 7px 30px 7px 30px;
                 margin: 0px; font-size: 17px; font-weight: bold; color: #EAEAEA;}