Loading...
 

Custom CSS for FlexForms


If you want to create your own CSS to use with FlexForms you'll need to start with the default CSS file and edit it accordingly. The full text of the default CSS appears below. You may copy the text and save it in the appropriate editor.

Make sure you assign a unique name to the file before you upload it to the FlexForms system so you can identiy your CSS code easily and save it with a .css extension.

 Input Field Locations and Size

Please do not by any chance affect the position or size of any input field. Any custom CSS with such modifications will not pass company review.

Please remember all custom CSS code is subject to review and will not be available for use until that review is completed.

FlexForms CSS Code   DOWNLOAD CSS FILE

/*
 * FLEXForms - Theme
 */
 /* Page Background
----------------------------------*/
 
 html {
     background-color: #EEEEEE;
     color: #333333;
 }
 /* Header, Body and Footer Backgrounds
----------------------------------*/
 
 .header {
     background: #D3D3D3;
 }
 
 .body {
     background-color: #FFFFFF;
 }
 
 .footer_background {
     background: #EEEEEE;
 }
 /* Borders and Divider Lines
----------------------------------*/
 
 .header,
 .body {
     border: 1px solid #DADADA;
 }
 
 .body {
     box-shadow: 0 2px 1px rgba(51, 51, 51, 0.18)
 }
 
 .body {
     -webkit-border-bottom-right-radius: 4px;
     -webkit-border-bottom-left-radius: 4px;
     -moz-border-radius-bottomright: 4px;
     -moz-border-radius-bottomleft: 4px;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
 }
 
 .footer_text {
     border-left: 1px dotted #AAAAAA;
 }
 
 .vertical_divider {
     border-left: 1px dotted #cccccc;
 }
 
 .bottom_section {
     border-top: 1px dotted #cccccc;
     border-left: 1px solid #eeeeee;
     border-right: 1px solid #eeeeee;
     border-bottom: 1px solid #eeeeee;
     background-color: #FAFAFA;
     -webkit-border-bottom-right-radius: 4px;
     -webkit-border-bottom-left-radius: 4px;
     -moz-border-radius-bottomright: 4px;
     -moz-border-radius-bottomleft: 4px;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
 }
 
 .special_offers,
 .secured_payment,
 .site_details,
 .contact_info,
 .access_details,
 .pay_by,
 .res_ccbill_account_create {
     border-top: 1px dotted #D0D0D0;
 }
 
 ul.directpay li span.field {
     border-bottom: 1px dotted #D0D0D0;
 }
 
 .two .two-col-v-divider {
     border-right-color: #CCCCCC;
 }
 /* Text Styles
----------------------------------*/
 
 h2 {
     color: #555555;
 }
 
 .product_description {
     color: #467EBF;
 }
 
 a,
 a:link,
 a:visited,
 a:hover,
 a:active,
 .create_wallet_guest .learnMoreFlyout_trigger {
     color: #007EA8;
 }
 
 .footer,
 .footer a:link,
 .footer a:visited,
 .footer a:hover {
     color: #666666;
 }
 
 .loyalty_discount .loyalty_title {
     font-weight: bold;
 }
 
 .loyalty_discount h2 {
     color: #E09800;
     text-shadow: none;
 }
 
 ul.list li span.label {
     color: #888888;
 }
 /* Input Elements
----------------------------------*/
 
 input[type="text"].error,
 input[type="tel"].error,
 input[type="password"].error,
 input[type="email"].error,
 input[type="number"].error,
 select.error {
     border: 1px solid #FF7777;
     background: #FFEAEA;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
     -webkit-transition: border linear 0.4s, box-shadow linear 0.4s;
     -moz-transition: border linear 0.4s, box-shadow linear 0.4s;
     -o-transition: border linear 0.4s, box-shadow linear 0.4s;
     transition: border linear 0.4s, box-shadow linear 0.4s;
 }
 
 input[type="text"],
 input[type="tel"],
 input[type="password"],
 input[type="email"],
 input[type="number"],
 select {
     background: #f8f8f8;
     border: 1px solid #bfbfbf;
     color: #333333;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
     -webkit-transition: border linear 0.4s, box-shadow linear 0.4s;
     -moz-transition: border linear 0.4s, box-shadow linear 0.4s;
     -o-transition: border linear 0.4s, box-shadow linear 0.4s;
     transition: border linear 0.4s, box-shadow linear 0.4s;
 }
 
 input[type="text"]:focus,
 input[type="tel"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
 input[type="number"]:focus,
 select:focus {
     border-color: rgba(2, 99, 147, 0.58);
     background: #FFFFFF;
     filter: none;
     outline: 0;
     outline: thin dotted \9;
     /* IE6-9 */
 }
 
 input#walletPassword,
 input#walletUserName {
     background: #FFFFFF;
 }
 
 .full-width-row .select-pricing {
     background: #FFFFFF;
 }
 
 .full-width-row .language_options select {
     background: #FFFFFF;
 }
 
 .full-width-row .language_options {
     border: 1px solid #bfbfbf;
     background: #f8f8f8
 }
 /* German ID Input Element Styling
----------------------------------*/
 
 input.germanID_red,
 input.germanID_blue,
 input.germanID_green,
 input.germanID_orange {
     filter: none;
 }
 
 input.germanID_red {
     border-color: #C40F18;
     background: #F36666;
 }
 
 input.germanID_blue {
     border-color: #1A89B9;
     background: #6BBBE1;
 }
 
 input.germanID_green {
     border-color: #6A9610;
     background: #9DC380;
 }
 
 input.germanID_orange {
     border-color: #A37B05;
     background: #E9B427;
 }
 /*CCBill Pay Buttons*/
 
 .ccbill-pay-border {
     border: 1px solid #ddd;
 }
 
 .navbar a,
 .navbar a.disabled:hover {
     border: 1px solid #bfbfbf;
     color: #3B76BB;
     background: #FFFFFF;
 }
 
 .navbar a:hover {
     background: #F9F9F9;
 }
 
 .navbar a.active {
     border: 1px solid #005C8B;
     color: #efefef;
     background: #026393;
 }
 /* Pay By Options
----------------------------------*/
 
 .navbar-border {
     border: 1px solid #CCCCCC;
 }
 
 .navbar ul li a,
 .navbar ul li a.disabled:hover {
     border: 1px solid #bfbfbf;
     color: #333333;
     text-shadow: 0 1px 0 #cccccc background: #e9e9e9;
     background: #ebebeb;
     -moz-box-shadow: 1px 1px 1px #FFFFFF inset;
     -webkit-box-shadow: 1px 1px 1px #FFFFFF inset;
     box-shadow: 1px 1px 1px #FFFFFF inset;
     filter: none;
 }
 
 .navbar ul li .tab.disabled:hover {
     border-left-width: 0;
 }
 
 .navbar ul li a:hover {
     background: #E8E5E5;
     -moz-box-shadow: 1px 1px 1px #FFFFFF inset;
     -webkit-box-shadow: 1px 1px 1px #FFFFFF inset;
     box-shadow: 1px 1px 1px #FFFFFF inset;
     filter: none;
 }
 
 .navbar ul li a.active {
     font-weight: bold;
     text-shadow: none;
     border: 1px solid #005C8B;
     color: #efefef;
     background: #026393;
     -moz-box-shadow: 2px 2px 1px rgba(18, 75, 103, 0.9) inset;
     -webkit-box-shadow: 2px 2px 1px rgba(18, 75, 103, 0.9) inset;
     box-shadow: 2px 2px 1px rgba(18, 75, 103, 0.9) inset;
     filter: none;
 }
 
 .navbar ul li a.active span {
     font-weight: normal;
 }
 /* Pay By Options - CCBill Pay
----------------------------------*/
 
 .payment_tabs .navbar a {
     color: #333333;
     border: 1px solid #E6E6E6;
 }
 
 .payment_tabs .navbar a:hover {
     background: #F9F9F9;
 }
 
 .payment_tabs .navbar a.active {
     border: 1px solid #E4E1E1;
     color: #333333;
     background: #F5F5F5;
 }
 
 .payment_tabs .navbar a.active::after {
     top: 100%;
     left: 50%;
     border: solid transparent;
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     pointer-events: none;
     border-color: transparent;
     border-top-color: #DEDEDE;
     border-width: 8px;
     margin-left: -8px;
 }
 /* Icon Styling
----------------------------------*/
 
 .icon-language_selector,
 .icon-help,
 .icon-info,
 .icon-chat,
 .icon-exit {
     color: #026393;
 }
 /* Panel Styling
----------------------------------*/
 
 .loyalty_discount ul {
     background-color: #FFFFD9;
     border: 1px solid #FFD275;
     border-radius: 4px;
 }
 
 .one_center .bottom_spacing .bottom_section,
 .one_left .bottom_spacing .bottom_section,
 .one_right .bottom_spacing .bottom_section {
     background: none;
     border-left: 0px;
     border-right: 0px;
     border-bottom: 0px;
     padding: 0;
 }
 
 .order_details,
 .access_details {
     background: #f8f8f8;
 }
 
 .special_offers_status_details {
     background: #f2f2f2;
 }
 /* DirectPay Styling
----------------------------------*/
 
 .directpay_header {
     background-color: #DDDDDD;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAApSURBVAiZTcoxDQAACMTAFhn414aNZ2Gg2yU1SQOgA1AfJG247qwPdBbbqg0d1Ln4SQAAAABJRU5ErkJggg==);
     -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
     -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
     border-radius: 4px;
 }
 
 .directpay_number {
     border: 1px solid #CCCCCC;
     background: #F6F6F6;
     -moz-box-shadow: inset 0px 0px 5px rgba(204, 204, 204, 1);
     -webkit-box-shadow: inset 0px 0px 5px rgba(204, 204, 204, 1);
     box-shadow: inset 0px 0px 5px rgba(204, 204, 204, 1);
 }
 
 .directpay_banklist_header {
     background: #007EA8;
     color: #FFFFFF;
     text-shadow: none;
 }
 
 .directpay_banklist_container {
     border: 1px solid #CCCCCC;
 }
 
 ul.directpay_banklist li {
     border-bottom-color: #CCCCCC;
 }
 /* Decline, Soft Decline and Approval Messages
----------------------------------*/
 
 .decline_content {
     background: #fcedc0;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQI12P4//+/MRgzMDCAMANUgAGKjcGiMA6ygDFMJQBtHSlxyl+WqwAAAABJRU5ErkJggg==);
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQI12P4//+/MRgzMDCAMANUgAGKjcGiMA6ygDFMJQBtHSlxyl+WqwAAAABJRU5ErkJggg==), -moz-linear-gradient(top, #fcedc0 0%, #edd682 100%);
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQI12P4//+/MRgzMDCAMANUgAGKjcGiMA6ygDFMJQBtHSlxyl+WqwAAAABJRU5ErkJggg==), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcedc0), color-stop(100%, #edd682));
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQI12P4//+/MRgzMDCAMANUgAGKjcGiMA6ygDFMJQBtHSlxyl+WqwAAAABJRU5ErkJggg==), -webkit-linear-gradient(top, #fcedc0 0%, #edd682 100%);
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQI12P4//+/MRgzMDCAMANUgAGKjcGiMA6ygDFMJQBtHSlxyl+WqwAAAABJRU5ErkJggg==), -o-linear-gradient(top, #fcedc0 0%, #edd682 100%);
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQI12P4//+/MRgzMDCAMANUgAGKjcGiMA6ygDFMJQBtHSlxyl+WqwAAAABJRU5ErkJggg==), -ms-linear-gradient(top, #fcedc0 0%, #edd682 100%);
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQI12P4//+/MRgzMDCAMANUgAGKjcGiMA6ygDFMJQBtHSlxyl+WqwAAAABJRU5ErkJggg==), linear-gradient(to bottom, #fcedc0 0%, #edd682 100%);
     filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fcedc0', endColorstr='#edd682', GradientType=0);
     color: #726842;
     border: 1px solid #E2D7AA;
     -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .processing_content {
     background-color: #E8F8FF;
     box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.2);
 }
 
 .soft_decline_content {
     box-shadow: inset 0px 0px 3px rgba(200, 0, 0, 0.5);
     -webkit-box-shadow: inset 0px 0px 3px rgba(200, 0, 0, 0.5);
     -moz-box-shadow: inset 0px 0px 3px rgba(200, 0, 0, 0.5);
 }
 
 .soft_decline_content {
     background-color: #FFEDED;
 }
 
 .soft_decline_content .decline_color,
 .approval_content .decline_color {
     color: #c80000;
 }
 
 .approval_content .approval_color {
     color: #009900;
 }
 /* Decline/Approval Redirect and Error Messages
----------------------------------*/
 
 .approval_redirect_content .approval_color {
     color: #009900;
 }
 
 .decline_redirect_content .decline_color,
 .error_content .error_color {
     color: #c80000;
 }
 
 .approval_redirect_content {
     background-color: #F0F0F0;
     box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.2);
 }
 
 .decline_redirect_content,
 .error_content {
     background-color: #FFEDED;
     box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.2);
 }
 /* Submit Button
----------------------------------*/
 
 a.submit_button {
     background-color: #045F8C;
     border: 1px solid #005C8B;
     border-bottom: 1px solid #013C5A;
     border-radius: 3px;
     -webkit-box-shadow: inset 0px 1px 1px 0 #0089CE;
     box-shadow: inset 0px 1px 1px 0 #0089CE;
     color: #ffffff;
     text-shadow: 0 -1px 0 #006093;
 }
 
 a.submit_button:hover {
     background-color: #0A5880;
     -webkit-box-shadow: inset 0px 1px 1px 0 #1A79AB;
     box-shadow: inset 1px 1px 1px 0 #1A79AB;
     cursor: pointer;
     color: #ffffff;
 }
 
 a.submit_button:active {
     background: #0D5174;
     border: 1px solid #00486F;
     border-bottom: 1px solid #003A59;
     -webkit-box-shadow: inset 1px 1px 1px 0 #00202D;
     box-shadow: inset 1px 1px 1px 0 #00202D;
     color: #ffffff;
 }
 
 @media only screen and (max-width: 1028px) {
     .one_center .bottom_spacing .bottom_section,
     .one_left .bottom_spacing .bottom_section,
     .one_right .bottom_spacing .bottom_section,
     .two .bottom_spacing .bottom_section {
         background: none;
         border-left: 0px;
         border-right: 0px;
         border-bottom: 0px;
     }
 }
 /* Cancel Button
----------------------------------*/
 
 a.submit_button.cancel_button {
     background-color: #DEDEDE;
     border: 1px solid #C5C5C5;
     border-bottom: 1px solid #AFAFAF;
     border-radius: 2px;
     -webkit-box-shadow: inset 0px 1px 1px 0 #F4F4F4;
     box-shadow: inset 0px 1px 1px 0 #F4F4F4;
     color: #333333;
     text-shadow: none;
 }
 
 a.submit_button.cancel_button:hover {
     color: #333333;
     text-shadow: none;
     background-color: #D4D4D4;
     -webkit-box-shadow: inset 1px 1px 1px 0 #EFEFEF;
     box-shadow: inset 1px 1px 1px 0 #EFEFEF;
     cursor: pointer;
 }
 
 a.submit_button.cancel_button:active {
     color: #333333;
     text-shadow: none;
     background: #B5B5B5;
     filter: none;
     border: 1px solid #B1A8A8;
     border-bottom: 1px solid #BCBCBC;
     -webkit-box-shadow: inset 1px 1px 1px 0 #989898;
     box-shadow: inset 1px 1px 1px 0 #989898;
 }
 /* Expanding area for payment methods
-------------------------------------- */
 
 .expander a {
     color: #333333;
 }
 
 .closed_view {
     background: #f8f8f8;
     background: -moz-linear-gradient(top, #fafafa 0%, #f2f2f2 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #f2f2f2));
     background: -webkit-linear-gradient(top, #fafafa 0%, #f2f2f2 100%);
     background: -o-linear-gradient(top, #fafafa 0%, #f2f2f2 100%);
     background: -ms-linear-gradient(top, #fafafa 0%, #f2f2f2 100%);
     background: linear-gradient(to bottom, #fafafa 0%, #f2f2f2 100%);
     filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#f2f2f2', GradientType=0);
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
     color: #333;
     border: 1px solid rgba(0, 0, 0, 0.15);
 }
 
 .closed_view:after {
     border-color: #333 transparent;
 }
 
 .expanded_view {
     background: #FFFFFF;
     border: 1px solid rgba(0, 0, 0, 0.17);
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }
 
 .expanded_view li a {
     color: #333333;
     border-bottom: 1px solid #e6e8ea;
 }
 
 .expanded_view li:hover a,
 .expanded_view li.selected a:hover {
     background: #E8F1F7;
 }
 /* Hover state */
 
 .expanded_view li.selected a {
     background: #f8f8f8;
     background: -moz-linear-gradient(top, #fafafa 0%, #f2f2f2 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #f2f2f2));
     background: -webkit-linear-gradient(top, #fafafa 0%, #f2f2f2 100%);
     background: -o-linear-gradient(top, #fafafa 0%, #f2f2f2 100%);
     background: -ms-linear-gradient(top, #fafafa 0%, #f2f2f2 100%);
     background: linear-gradient(to bottom, #fafafa 0%, #f2f2f2 100%);
     filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#f2f2f2', GradientType=0);
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
 }
 /* Selected state */
 
 .expanded_view li.disabled_style a {
     color: #CECECE;
 }
 /* Flyout for CCBill Contact Info
-------------------------------------- */
 
 .flyout_support .flyout {
     background: #fff;
     border-radius: 4px;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border: 1px solid #e6e8ea;
     box-shadow: 0px 0px 2px #DDDDDD;
     -moz-box-shadow: 0px 0px 2px #DDDDDD;
     -webkit-box-shadow: 0px 0px 2px #DDDDDD;
 }
 
 .flyout_support .flyout li a {
     color: #333;
     border-bottom: 1px solid #d3d4d6;
 }
 
 .flyout_support.active {
     border-radius: 4px 4px 0 0;
     box-shadow: none;
     border-bottom: none;
     color: #058acd;
 }
 
 .flyout_support.active:after {
     border-color: #82d1ff transparent;
 }
 
 .flyout_support.active .flyout {
     border-top: 1px solid #e6e8ea;
     border-bottom: 1px solid #d3d4d6;
 }
 
 .flyout_support a .icon-info {
     color: #333333;
 }
 
 .flyout_support .flyout li:hover a,
 .flyout_support a:hover .icon-info {
     color: #007EA8;
 }
 /* CCBill Account section
-------------------------------------- */
 
 .pay_by_ccbill_login {
     border: 1px solid #DEDEDE;
     background-color: #FCFCFC;
 }
 
 .pay_by.wallet_addPaymentMethod_active #paymentOptionFields > div.subscription_selector {
     background-color: #FCFCFC;
 }
 
 #create_new_wallet > #cancel_ccbill_account_link {
     color: #007EA8;
 }
 
 .existing_payment_methods #btn_edit {
     color: #007EA8;
 }
 
 .existing_payment_methods .cancel_edit_link {
     color: #f75252;
 }
 /* Message Boxes
----------------------------------*/
 
 .message_box.info {
     color: #3dacf1;
 }
 
 .message_box.alert,
 #msg_paymentMethod_maxNumberReached {
     color: #FFA53C;
 }
 
 .validation,
 .required,
 .message_box.error,
 .advisory {
     color: #f75252;
 }
 
 .ccbill_creation #create_new_wallet {
     border: 1px solid #F3F3F3;
 }
 
 .pay_by_wrap .ccbill-cancel-account {
     border-left: 1px solid #f3f3f3;
 }
 
 .ccbill_creation #create_new_wallet #cancel_ccbill_account_link:hover {
     background: #f3f3f3;
 }

If you need any help in configuring your custom CSS, please contact Merchant Support in the manner most convenient to you: