Snippets

MeS NA MeS PayHere css examples

Created by MeS NA

#merchantLogoBox, #mesLogoBox, #verisignLogoBox, #pageFooter, 
#paymentForm, #paymentReceipt, #printReceipt, #formHeader, #formMessage, 
#receiptHeader, #formContent, #receiptContent, #formButton, #processingMessage {
  margin-left:   auto;
  margin-right:  auto;
  text-align:    center;
  width:         600px;
}

#formMessage {
  border-top:    #2A3178 2px solid;
  border-left:   #2A3178 2px solid;
  border-right:  #2A3178 2px solid;
  border-bottom: #2A3178 2px solid;
  margin-top:    8px;
}
.errorMessage {
  font-family:  Arial, Helvetica, sans-serif;
  font-size:     10pt;
  font-weight:   bold;
  color:         red;
}

#printReceipt {
  background-color: #ffffff;
  padding:       10 10 30 10;
}

#merchantLogoBox img {
  max-height:    185px;
  max-width:     600px;
}

#pageFooter img {
  max-height:    100px;
  max-width:     600px;
}

#formHeader, #receiptHeader {
  display:       table;
  background-color: orange;
}

#formSectionHeader, #formFooter, #receiptSectionHeader, 
#printSectionHeader, #billingExplaination {
  margin-left:   auto;
  margin-right:  auto;
  margin-top:    5px;
  text-align:    center;
  width:         600px;
  background-color: #DDDFE3;
}

#billingExplaination {
  text-align:    center;
}

#cvvHelp {
  float:         left;
  padding:       2px 0 0 2px;
  width:         auto;
}

#formButton {
  margin-top:    25px;
  margin-bottom: 10px;
}

#submitMessage {
  text-align:    center;
}

#submitBtn, #returnBtn {
  float:         left;
  margin:        0 2px 0 0;
  text-align:    right;
  width:         50%;
}

#cancelBtn, #printBtn {
  text-align:    left;
}

#ccLogoBox {
  float:         right;
  margin:        3px 0 0 0;
  text-align:    left;
  width:         354px;
}

#printReceiptHeader, #printReceiptFooter {
  width:         500px;
  font-size:     9pt;
  font-family:   verdana, helvetica, sans-serif;
  text-align:    left;
  margin:        8px auto;
}

#printReceiptLogo {
  width:         500px;
  margin-left:   auto;
  margin-right:  auto;
  text-align:    center;
}

.formHeaderContent, .receiptHeaderContent {
  color:         blue;
  font-family:   Verdana,Tahoma,Arial;
  font-size:     12pt;
  font-weight:   bold;
  text-align:    center;
}

.formSectionTitle, .receiptSectionTitle {
  background-color: #8DA8C3;
  color:         #FFFFFF;
  border-color:  #FFFFFF;
  border-style:  solid;
  border-width:  1px;
  font-family:   verdana,helvetica,sans-serif;
  font-size:     8pt;
  font-weight:   bold;
  height:        18px;
  line-height:   18px;
}

.printSectionTitle {
  background-color: #ffffff;
  color:         #000000;
  font-weight:   bold;
  font-size:     8pt;
  border-style:  solid;
  border-width:  1px;
  font-family:   verdana,helvetica,sans-serif;
  height:        18px;
  line-height:   18px;
}

.fieldLabel, .receiptFieldLabel {
  float:         left;
  font-family:   Verdana,Tahoma,Arial;
  font-size:     8pt;
  padding-top:   5px;
  text-align:    right;
  width:         240px;
}

.fieldData, .receiptFieldData {
  float:         left;
  font-family:   Verdana,Tahoma,Arial;
  font-size:     8pt;
  padding-top:   4px;
  padding-left:  6px;
  text-align:    left;
}

.formField {
    font-family: Verdana,Tahoma,Arial;
    font-size:   8pt;
}

.formText {
    float:       left;
    font-family: Verdana,Tahoma,Arial;
    font-size:   7pt;
    padding:     4px 0 0;
    text-align:  left;
}

.smallText { 
    font-family: Arial, Helvetica, sans-serif;
    font-size:   7pt;
    line-height: 9pt;
    color:       #777777;
    text-align:  left;
}

.buttonText {
  font-family:   Verdana,Tahoma,Arial;
  font-size:     8pt;
  text-align:    center;
}

.errorText {
  font-family:   Arial, Helvetica, sans-serif;
  font-size:     9pt;
  line-height:   18pt;
}

.messageText {
  font-family:   Arial, Helvetica, sans-serif;
  font-size:     9pt;
  font-weight:   bold;
}

@media only screen and (max-width: 800px) {
  #paymentForm, #paymentReceipt, #formHeader, #receiptHeader, #mesLogoBox, 
  #merchantLogoBox, #verisignLogoBox, #pageFooter, #formMessage {
    width: 97%;
  }
  
  #formContent, #receiptContent, #formSectionHeader, #receiptSectionHeader, 
  #formFooter, #formButton, #submitBtn, #returnBtn, #cancelBtn, processingMessage,
  #printBtn, .buttonText {
    width: 100%;
  }
  
  #printSectionHeader {
    width: 90%;
  }
  
  #merchantLogoBox img {
    max-width: 97%;
    max-height: 80px;
  }
  
  #verisignLogoBox img, #mesLogoBox img, #pageFooter img {
    max-width: 97%; 
    max-height: 40px;
  }
  
  #formButton { 
    margin-top: 5px; 
    margin-bottom: 5px;
  }
  
  #cvvHelp, #billingExplaination, #formFooter {
    display: none;
  }
  
  #submitBtn, #returnBtn, #cancelBtn, #printBtn { 
    float: none; 
    margin-bottom: 3px;
  }
  
  #formMessage { 
    border-width: 1px; 
    margin-top: 4px; 
  }
  
  #ccLogoBox {
     width: 66%;
     margin-right: -6px;
   }
  
  .errorMessage { 
    font-size: 8pt; 
  }
  
  .errorText { 
    font-size: 7pt; 
    line-height: 10pt; 
  }
  
  .formHeaderContent, .receiptHeaderContent { 
    font-size: 8pt; 
  }
  
  .formField, .buttonText, .fieldLabel, .fieldData, 
  .receiptFieldLabel, .receiptFieldData, .messageText { 
    font-size: 7pt; 
  }
  
  .buttonText { 
    height: 22px;
  }
  
  .fieldLabel { 
    width: 34%; 
  }
  
  .receiptFieldLabel { 
    width: 45%;
  }
}

#merchantLogoBox, #mesLogoBox, #verisignLogoBox, #pageFooter, 
#paymentForm, #paymentReceipt, #printReceipt, #formHeader, #formMessage, 
#receiptHeader, #formContent, #receiptContent, #formButton, #processingMessage {
  margin-left:   auto;
  margin-right:  auto;
  text-align:    center;
  width:         600px;
}

#formMessage {
  border-top:    #2A3178 2px solid;
  border-left:   #2A3178 2px solid;
  border-right:  #2A3178 2px solid;
  border-bottom: #2A3178 2px solid;
  margin-top:    8px;
}
.errorMessage {
  font-family:  Arial, Helvetica, sans-serif;
  font-size:     10pt;
  font-weight:   bold;
  color:         red;
}

#printReceipt {
  background-color: #ffffff;
  padding:       10 10 30 10;
}

#merchantLogoBox img {
  max-height:    185px;
  max-width:     600px;
}

#pageFooter img {
  max-height:    100px;
  max-width:     600px;
}

#formHeader, #receiptHeader {
  display:       table;
  background-color: orange;
}

#formSectionHeader, #formFooter, #receiptSectionHeader, 
#printSectionHeader, #billingExplaination {
  margin-left:   auto;
  margin-right:  auto;
  margin-top:    5px;
  text-align:    center;
  width:         600px;
  background-color: #DDDFE3;
}

#billingExplaination {
  text-align:    center;
}

#cvvHelp {
  float:         left;
  padding:       2px 0 0 2px;
  width:         auto;
}

#formButton {
  margin-top:    25px;
  margin-bottom: 10px;
}

#submitMessage {
  text-align:    center;
}

#submitBtn, #returnBtn {
  float:         left;
  margin:        0 2px 0 0;
  text-align:    right;
  width:         50%;
}

#cancelBtn, #printBtn {
  text-align:    left;
}

#ccLogoBox {
  float:         right;
  margin:        3px 0 0 0;
  text-align:    left;
  width:         354px;
}

#printReceiptHeader, #printReceiptFooter {
  width:         500px;
  font-size:     9pt;
  font-family:   verdana, helvetica, sans-serif;
  text-align:    left;
  margin:        8px auto;
}

#printReceiptLogo {
  width:         500px;
  margin-left:   auto;
  margin-right:  auto;
  text-align:    center;
}

.formHeaderContent, .receiptHeaderContent {
  color:         blue;
  font-family:   Verdana,Tahoma,Arial;
  font-size:     12pt;
  font-weight:   bold;
  text-align:    center;
}

.formSectionTitle, .receiptSectionTitle {
  background-color: #8DA8C3;
  color:         #FFFFFF;
  border-color:  #FFFFFF;
  border-style:  solid;
  border-width:  1px;
  font-family:   verdana,helvetica,sans-serif;
  font-size:     8pt;
  font-weight:   bold;
  height:        18px;
  line-height:   18px;
}

.printSectionTitle {
  background-color: #ffffff;
  color:         #000000;
  font-weight:   bold;
  font-size:     8pt;
  border-style:  solid;
  border-width:  1px;
  font-family:   verdana,helvetica,sans-serif;
  height:        18px;
  line-height:   18px;
}

.fieldLabel, .receiptFieldLabel {
  float:         left;
  font-family:   Verdana,Tahoma,Arial;
  font-size:     8pt;
  padding-top:   5px;
  text-align:    right;
  width:         240px;
}

.fieldData, .receiptFieldData {
  float:         left;
  font-family:   Verdana,Tahoma,Arial;
  font-size:     8pt;
  padding-top:   4px;
  padding-left:  6px;
  text-align:    left;
}

.formField {
    font-family: Verdana,Tahoma,Arial;
    font-size:   8pt;
}

.formText {
    float:       left;
    font-family: Verdana,Tahoma,Arial;
    font-size:   7pt;
    padding:     4px 0 0;
    text-align:  left;
}

.smallText { 
    font-family: Arial, Helvetica, sans-serif;
    font-size:   7pt;
    line-height: 9pt;
    color:       #777777;
    text-align:  left;
}

.buttonText {
  font-family:   Verdana,Tahoma,Arial;
  font-size:     8pt;
  text-align:    center;
}

.errorText {
  font-family:   Arial, Helvetica, sans-serif;
  font-size:     9pt;
  line-height:   18pt;
}

.messageText {
  font-family:   Arial, Helvetica, sans-serif;
  font-size:     9pt;
  font-weight:   bold;
}

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.